Todo Context에 대해 질문있습니다.

Question

안녕하세요 강의를 너무 잘 보고 있습니다. 강의를 보다가 조금 헷갈리는 부분이 있는데 TodoContext.Provider로 value를 todos로 하고 그 밑에는 TodoDispatchContext.Provider로 value는 dispatch로 작성이 되었는데 이렇게 TodoContext와 TodoDispatchContext를 두개 작성된 이유가 궁금합니다.

짐코딩 · Answer

React에서 TodoContext와 TodoDispatchContext를 두 개로 분리하는 이유는 상태 관리와 관심사 분리(Separation of Concerns)를 위한 좋은 디자인 패턴입니다. 이 접근 방식에는 몇 가지 중요한 장점이 있습니다:

관심사 분리

TodoContext는 할 일 목록의 상태(데이터)만 전달합니다.
TodoDispatchContext는 할 일 목록을 변경하는 dispatch 함수만 전달합니다.

성능 최적화

상태(todos)나 dispatch 함수 중 하나만 변경되어도 다른 컴포넌트의 불필요한 리렌더링을 막을 수 있습니다.

더 명확한 데이터 흐름

어떤 컴포넌트가 상태를 읽기만 하고, 어떤 컴포넌트가 상태를 변경할 수 있는지 명확히 구분할 수 있습니다.

사용 예시를 보면:

function TodoList() {
  const todos = useTodos(); // 상태만 읽기
  const dispatch = useTodosDispatch(); // 상태 변경 함수 사용

  return (
    // 렌더링 로직
  );
}

이렇게 분리하면 컴포넌트의 책임을 더 명확하게 나눌 수 있고, 코드의 유지보수성과 가독성을 높일 수 있습니다.

만약 하나의 Context로 모든 것을 관리한다면, 불필요한 리렌더링이 더 자주 발생하고 컴포넌트 간 데이터 흐름이 덜 명확해질 수 있습니다.

제 강의의 코드가 정답은 아니며 현 상황에 따라 적절히 이용하시면 될 것 같습니다.

인프런 커뮤니티 질문&답변

Todo Context에 대해 질문있습니다.