-
20241004 34일차카테고리 없음 2024. 10. 4. 09:54
React Hook
기본
- useState
- useEffect
- useRef
- useParams
- useSearchParams
- useNavigation
최적화
- useContext
- useReducer
- useMemo
----------------------
[useContext]
- 컴포넌트 트리에서 깊이 중첩된 자식 컴포넌트들로 값을 전달할 때 유용함
- props는 하위 컴포넌트로 전달되는 방식이므로 상위 컴포넌트에서 하위 컴포넌트로 불필요한 props를 여러번 전달해야되는 Props drilling이 발생할 수 있음
- 전역 상태를 쉽게 관리함const MyContext = React.createContext(); function MyComponent() { const value = useContext(MyContext); // MyContext의 값을 읽음 return <div>{value}</div>; }
[useReducer]
- useState: 단순한 상태 업데이트에 적합
- useReducer: 상태와 그 상태를 업데이트하는 로직을 분리할 수 있어 더 복잡한 상태 변화를 관리할 때 유리함
- 코드의 가독성을 높일 수 있음
- 유지보수가 용이함 (App.jsx 수정할 필요 없이 reducer 함수만 수정하면 됨)const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> <span>{state.count}</span> <button onClick={() => dispatch({ type: 'increment' })}>+</button> </> ); }
[useMemo]
- 특정 값이나 함수가 다시 계산되지 않도록 메모이제이션함
- 값이나 함수가 바뀌지 않는다면 이전에 계산된 값을 그대로 재사용함
- 불필요한 렌더링을 줄여줌const expensiveCalculation = (num) => { console.log("Calculating..."); return num * 2; }; function MyComponent({ number }) { const memoizedValue = useMemo(() => expensiveCalculation(number), [number]); return <div>{memoizedValue}</div>; }
----------------------
public의 svg, src.assets의 svg 차이
- public: 매번 읽어옴
- src.assets: 메모리에 올려놓음