DIL: 모던 리액트 딥 다이브, 2주차-4

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week2-4_2024-03-14

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------- | ----------- | | 2주차 | 3, 5장 | 리액트 훅과 상태관리 라이브러리 | 219p~228p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 11시~12시
레퍼런스

• https://react.dev/reference/react/useReducer

---

React Hook 파헤치기

useContext

Context란?

• props drilling은? 번거로움

• createContext 후 하위 컴포넌트에 전달

  <Context.Provider value={{ foo: "bar " }}>
    <ChildComponent />
  </Context.Provider>
  
  ...
  export default function ChildComponent (){
    const value = useContext(Context);
    ...
  }
  

context를 별도의 코드로 감싸기

• 컴포넌트가 실행될 때 콘텍스트가 존재하지 않아서 에러 발생하는 경우 있음

• 초기화 여부 확인

• TS 타입 추론

• 상위에 Provider가 없는 경우에도 디버깅

  function useMyContext() {
    const context = useContext(MyContext);
    if (context === undefined) {
      throw new Error("Context Exception");
    }
    return context;
  }
  
  ...
  export default function ChildComponent (){
    const { foo } = useMyContext();
    ...
  }
  

useContext를 사용할 때 주의점

1. 의존성: Provider에 의존하여 재활용이 어려워진다.
2. 상태관리 API가 아님

• 조건1: 어떠한 상태를 기반으로 다른 상태를 만들어낸다 => x
• 조건2: 상태 변화를 최적화한다 => x. 컴포넌트 트리가 리랜더링되는 고질적인 문제(props 전달이기 때문, memo로 해결 가능. 굳이?)

useContext로 주입한 상태를 사용할 뿐, 그 자체로 랜더링 최적화에 아무런 도움이 되지 않는다.

useReducer

• https://react.dev/reference/react/useReducer
  const [state, dispatch] = useReducer(reducer, initialArg, init?) // init은 게으른 초기화

• state을 사전에 정의된 dispatcher로만 수정할 수 있도록 한다.
• state의 값에 대한 접근을 미리 정의둔 dispatcher, 즉 컴포넌트에서만 가능하게 함
• state 값을 변경하는 시나리오를 제한 / 변경을 빠르게 함
• 왜 쓰냐?
  • 여러 개의 state을 묶어서 관리
  • state 사용 로직과 비즈니스 로직 분리

type State = {
  color: string;
};

type Action = { type: "day" | "night"; payload: State };

function init(count: State): State {
  return count;
}

const initialState: State = { count: 0 };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "day":
      return { color: "#ffffff" };
    case "night":
      return { color: "#222222" };
    default:
      throw new Error("Unexpected action type");
  }
}

export default function App() {
  const [state, dispatcher] = useReducer(reducer, initialState, init);
}

useReducer로 userState 만들기

function reducer(prevState, newState) {
  return typeof newState === "function" ? newState(prevState) : newState;
}

function init(intialArg) {
  return typeof intialArg === "function" ? intialArg() : intialArg;
}

function useState(intialArg) {
  return useReducer(reducer, intialArg, init);
}

userState로 useReducer 만들기

const useReducer = (reducer, initialArg, init) => {
  const [state, setState] = useState(
    init ? () => init(initialArg) : initialArg
  );

  const dispatch = useCallback(
    (action) => setState((prev) => reducer(prev, action)),
    [reducer]
  );

  return useMemo(() => [state, dispatch], [state, dispatch]);
};

| 기준 | useState | useReducer | | ------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------------------------- | | 정의 | 단일 상태 값에 사용 | 여러 하위 값 있는 복잡한 상태 로직 관리에 적합 | | 사용 사례 | 간단한 상태 로직과 값에 사용 | 상태 업데이트 로직 복잡하거나 여러 상태 서로 의존적일 때 사용 | | 상태 관리 | 단일 값(객체, 배열, 기타) 관리 | 액션을 통한 상태 업데이트하는 리듀서 함수 사용하여 복잡한 상태 관리 | | 사용 방법 | const [state, setState] = useState(initialState) | const [state, dispatch] = useReducer(reducer, initialState) | | 장점 | 구현 간단하고 직관적 | 복잡한 상태 로직 외부화, 테스트 쉬움, 상태 업데이트 로직 컴포넌트 외부로 분리 가능 | | 단점 | 복잡한 상태 로직 내부 포함시키면 컴포넌트 비대해질 수 있음 | 사용법 useState보다 복잡, 초기 설정 많이 필요할 수 있음 | | 상태 업데이트 로직 | 상태 업데이트 위해 새로운 상태 값 직접 설정 | 액션 객체 정의하고, 이를 처리하는 리듀서 함수 통해 상태 업데이트 | | 적합한 사용 사례 | 단순한 상태 업데이트, 예: 카운터, 토글 스위치 | 상태 업데이트 여러 단계와 조건 포함하는 경우, 예: 쇼핑 카트, 게임 로직 |

---

번외

게으른 초기화 (Lazy Initialization)

게으른 초기화는 컴포넌트의 상태를 필요할 때까지 초기화하지 않는 패턴을 의미합니다. 이 방법은 리소스를 절약하고 애플리케이션의 성능을 향상시키는 데 도움이 됩니다. 예를 들어, 큰 데이터 세트나 계산 비용이 많이 드는 값을 상태로 관리해야 할 때, 컴포넌트가 마운트될 때가 아니라 해당 값이 실제로 필요할 때 초기화하도록 설정할 수 있습니다.

React에서는 useState 훅을 사용할 때 초기 상태를 함수로 전달함으로써 게으른 초기화를 구현할 수 있습니다. 이 함수는 컴포넌트가 처음 렌더링될 때 한 번만 호출되며, 그 결과값이 초기 상태값으로 사용됩니다.

이 방법은 리소스 사용을 최적화하고 애플리케이션의 시작 시간을 단축시키는 데 유용합니다.

const [state, setState] = useState(() => {
  // 초기 상태를 계산하는 로직
  const initialState = performExpensiveCalculation();
  return initialState;
});

useReducer

useReducer는 React에서 복잡한 상태 로직을 관리할 수 있도록 도와주는 훅입니다.

useState보다 더 세밀한 상태 관리가 필요할 때 주로 사용됩니다. useReducer는 현재 상태와 액션을 인자로 받는 리듀서(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 (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

useReducer는 상태 업데이트 로직을 컴포넌트 바깥으로 분리할 수 있게 해주며, 액션을 통해 상태를 업데이트하는 방식은 Redux와 유사한 패턴을 제공합니다. 이는 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

useReducer와 게으른 초기화를 함께 사용할 수도 있습니다. useReducer의 두 번째 인자로 초기 상태를 계산하는 함수를 전달함으로써, 복잡한 상태 로직을 가진 컴포넌트의 성능을 최적화할 수 있습니다.

const [state, dispatch] = useReducer(reducer, initialArg, init);

여기서 initialArg는 init 함수에 전달되며, init 함수는 초기 상태를 계산하여 반환합니다. 이는 애플리케이션의 시작 성능을 향상시키는 데 도움이 될 수 있습니다.