React/Context ​ React는 여러 중첩 구성 요소에 걸쳐 있는 상태에 대해 매우 필요한 솔루션으로 Context API를 출시했습니다. 불행히도 컨텍스트용 API는 약간 부피가 커서 클래스 구성 요소에서 사용하기 어려웠습니다. React Hooks가 출시되면서 React 팀은 Context와 상호 작용하는 방법을 재고했고, useContext 후크를 사용하여 코드를 대폭 단순화하기로 결정했습니다. What Is The Context API? ​ 이미 알고 있듯이 React는 state를 사용하여 데이터를 저장하고 props를 사용하여 구성 요소 간에 데이터를 전달합니다. 이것은 로컬 상태를 처리하고 부모/자식 구성 요소 간에 간단한 소품을 전달하는 데 적합합니다. 하지만 이러한 시스템은 깊이..

const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector('title'); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]); return setTitle; }; const App = () => { const titleUpdater = useTitle('Loading...'); setTimeout(() => titleUpdater('Home'), 5000); return ( Hi setNumber(number + 1)}> ..

const App = () => { const sayHello = () => console.log('hello'); const [number, setNumber] = useState(0); const [aNumber, setAnumber] = useState(0); useEffect(sayHello, [number]); return ( Hi setNumber(number + 1)}> setAnumber(aNumber + 1)}> ); };

const App = () => { const [item, setItem] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item - 1); return ( Hello {item} Start editing to see some magic happen! Increment Decrement ); }; class AppUgly extends React.Component { state = { item: 1, }; render() { const { item } = this.state; return ( Hello {item} Start editing to see some magic hap..

const content = [ { tab: 'Section 1', content: "I'm the content of the Section 1", }, { tab: 'Section 2', content: "I'm the content of the Section 2", }, ]; const useTabs = (initialTab, allTabs) => { if (!allTabs || Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = useState(initialState) return { currentItem: allTabs[currentIndex], changeItem: setCurrentIndex } } const ..

export const useInput = (initialValue, validator) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { const { target: { value }, } = event; let willUpdate = true; if (typeof validator === 'function') { willUpdate = validator(value); } if (willUpdate) { setValue(value); } }; return { value, onChange }; }; const App = () => { const maxLen = (value) => value.length

Getting Ready for the Router For navigation, use react-router-dom - react-router-dom: the package to do navigation in React npm install react-router-dom mkdir, components & routes in routes folder, make a file "Home.js" and "About.js". this is two router, that meand "Ok, good you go to about.js or hmode.js" // App.js import React from 'react'; import { HashRouter, Route } from 'react-router-dom'..