20241004 34일차

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: 메모리에 올려놓음