Todo Context에 대해 질문있습니다.
105
작성한 질문수 66
안녕하세요 강의를 너무 잘 보고 있습니다. 강의를 보다가 조금 헷갈리는 부분이 있는데 TodoContext.Provider로 value를 todos로 하고 그 밑에는 TodoDispatchContext.Provider로 value는 dispatch로 작성이 되었는데 이렇게 TodoContext와 TodoDispatchContext를 두개 작성된 이유가 궁금합니다.
답변 1
0
React에서 TodoContext와 TodoDispatchContext를 두 개로 분리하는 이유는 상태 관리와 관심사 분리(Separation of Concerns)를 위한 좋은 디자인 패턴입니다. 이 접근 방식에는 몇 가지 중요한 장점이 있습니다:
관심사 분리
TodoContext는 할 일 목록의 상태(데이터)만 전달합니다.
TodoDispatchContext는 할 일 목록을 변경하는 dispatch 함수만 전달합니다.
성능 최적화
상태(todos)나 dispatch 함수 중 하나만 변경되어도 다른 컴포넌트의 불필요한 리렌더링을 막을 수 있습니다.
더 명확한 데이터 흐름
어떤 컴포넌트가 상태를 읽기만 하고, 어떤 컴포넌트가 상태를 변경할 수 있는지 명확히 구분할 수 있습니다.
사용 예시를 보면:
function TodoList() {
const todos = useTodos(); // 상태만 읽기
const dispatch = useTodosDispatch(); // 상태 변경 함수 사용
return (
// 렌더링 로직
);
}
이렇게 분리하면 컴포넌트의 책임을 더 명확하게 나눌 수 있고, 코드의 유지보수성과 가독성을 높일 수 있습니다.
만약 하나의 Context로 모든 것을 관리한다면, 불필요한 리렌더링이 더 자주 발생하고 컴포넌트 간 데이터 흐름이 덜 명확해질 수 있습니다.
제 강의의 코드가 정답은 아니며 현 상황에 따라 적절히 이용하시면 될 것 같습니다.
오타?
0
27
1
뭐하나 여쭤봐도 될까요?
0
70
1
안녕하세요 질문이 있습니다.
0
55
2
질문 : 삭제 버튼 아규먼트 (id)
0
50
1
Tailwind 버전 확인
0
62
1
align-items 정렬
0
50
2
vite 명령어로 프로젝트를 만들었습니다. (vscode)
0
79
1
31. 객체 업데이트 하기 - 10:15 질문
1
55
2
강의교안, 내용 인용해서 블로그 글 작성
1
80
2
이미지가 출력되지 않아요
1
73
2
강의와 만들어진 코드가 달라요
0
75
3
AI와 CSS 라이브러리의 궁합
0
95
1
onClick 이벤트에 함수 넘길 때
0
64
1
린캔버스 기능 구현은 왜 못하나요.... 구현하고 싶습니다...
0
101
1
notes 없음 읽기 오류
0
72
1
Object.assign 문법
0
64
1
react-router 전혀 기능 안함
0
53
1
react-router-dom@6.25.1
0
47
1
React Router 최신 스펙
0
207
1
Immer 에서 filter, map 사용
0
54
1
vite 설치에 대해 질문있습니다.
0
76
2
라이브러리 버전 일치 이슈
0
76
1
"Enter 키 발생 시 항목 추가" 부분에서 공백이 포함되면 한 줄이 더 입력됩니다
0
49
2
TotalCounter을 작성할때
0
65
2