dolog

🍓 Basic Hooks • useState • useEffect • useContext 🍓 Addtional Hooks • useReducer • useCallback • useMemo • useRef • useNavigate • useImperativeHandle • useLayoutEffect • useDebugValue • useDeferredValue • useTransition • useId 🍓 Library Hooks • useSyncExternalStore • useInsertionEffect https://velog.io/@velopert/react-hooks#1-usestate

230112 Context API ✔︎ React에서 컴포넌트가 데이터를 다루는 방법으로 props, state, context가 있다 ✔︎ props drilling을 해결하기 위해 나타난 방법으로 전역적인 데이터를 다룰때 사용 ✔︎ Context는 React 컴포넌트 중 하나이다 Context 를 쉽게 설명하자면, 전역적인 데이터를 다룰 때 사용하는데 전역 데이터를 Context 안에 저장한 후 해당 데이터가 필요한 컴포넌트에서 불러와 사용할 수 있게 해준다 React에서 Context를 사용하기 위해서는 Context API를 이용해야 하고 Context의 Provider, Consumer를 사용해야 한다 Context에 저장된 데이터를 사용하기 위해서는 root 컴포넌트에 Context의 Prov..

230109 Custom Hooks ✔︎ 반복되는 로직을 쉽게 재사용하기 위함 ✔︎ 컴포넌트의 로직 분리로 코드 정리 가능 -보통은 큰 디렉토리 안에 작은 디렉토리에 useHooksName.js 파일을 만들어 진행한다 -기존에 존재하는 Hooks를 사용하여 원하는 기능을 구현해준다 -컴포넌트에서 사용하고 싶은 값을 반환(return)한다 onChange : useState, useCallback ➡️ useReducer import React, { useReducer, userCallback } from react; function reducer(state, action) { switch(action.type) { case ‘CHANGE_INPUT’: return { …state, [action.name..