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

Ctrl_F 0712 스크럼 회의 메인 페이지 뷰입니다. 아직 커넵 API를 연동시키지 못해, 영화 앱 관련된 API로 대체해서 사용했습니다. 왼쪽 상단 로고와 타이틀을 클릭 시 홈페이지 이동합니다. 하단의 한끗차 IT 클릭 시 한끗차IT 깃헙으로 연결됩니다. 파란색 1번 빨간색 2번 노란색 3번 초록색 4번 보라색 5번 TO-DO #1. 파란색 1번 메인 페이지에서 파란색 ① 클릭 시 다음 화면으로 전환됩니다. 디테일 페이지 뷰이고, 안의 내용은 임의로 채워넣었습니다. #2. 빨간색 2번 빨간색 ② 클릭 시 다음 화면으로 전환되며, 현재 모아진 아이디어 20에서 숫자 20은 실제 게시된 노트의 수와 연동시켜놓았습니다. 승인된 아이디어들만 보여지게 됩니다. #3. 노란색 3번 노란색 ③을 클릭 시 다음 ..

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