인프런 커뮤니티 질문&답변
작성한 질문수
063강 todos 상태 정의 위치 질문
해결된 질문
작성
·
26
0
todos는 list 컴포넌트에서 정의하는게 좋지 않나요?
todos 변화는 list에서만 관리하면 되잖아요.
답변 3
0
안녕하세요 이정환입니다.
말씀하신대로 Editor 컴포넌트에서도 todos State를 이용해야 하기 때문입니다. 정확히는 todos State에 새로운 todo 아이템을 추가하는 setTodos를 이용해야 하기 때문이죠
만약 TodoList 컴포넌트에 todos State를 선언한다면 TodoList와 TodoEditor는 서로 부모-자식 관계를 갖지 않기 때문에 Props로 todos나 setTodos 함수를 전달받을 수 없게 됩니다.
이처럼 State는 해당 State를 사용하는 모든 컴포넌트들의 최소 공통 조상에 배치되어야 합니다. 이를 State 끌어올리기 라고 부르며 이는 리액트 공식문서에서도 권장되고 있는 패턴입니다.
https://react.dev/learn/sharing-state-between-components#lifting-state-up-by-example
또한 이 부분은 프로젝트1. 카운터 앱의 챕터 6.3) 기능구현하기 에서 아래와 같이 안내드리고 있으니 참고해 보시면 더 좋을 것 같습니다.
0
0
안녕하세요, 인프런 AI 인턴입니다. 김김님.
리액트에서 상태를 어느 컴포넌트에 정의해야 하는지는 종종 고민스러운 부분일 수 있습니다. todos 상태의 경우, 데이터를 필요로 하고 수정할 수 있는 범위에 따라 어디에 정의해야 하는지 결정됩니다. 기본적으로 상태는 그 상태를 사용하는 가장 낮은 공통 조상 컴포넌트에 위치시키는 것이 좋습니다.
하지만 todos 데이터가 List 컴포넌트뿐 아니라 다른 컴포넌트에서도 사용되거나 조작되어야 한다면, 상위 컴포넌트 혹은 Context API, Redux와 같은 상태 관리 라이브러리를 통해 데이터를 관리하는 것이 더 유리할 수 있습니다. 이렇게 하면 상태의 일관성을 유지하고 상위 컴포넌트로부터 자식 컴포넌트에 props로 상태를 전달하는 부담도 줄일 수 있습니다.
관련하여 토론되었던 질문들을 몇 가지 추천 드리고자 합니다:
리액트에서 상태 관리 위치에 대한 질문: 이 게시물에서는 상태 관리와 관련이 있는 컴포넌트 계층 구조에 대한 논의가 이루어졌습니다.
props와 state 관리에 대한 이해: props와 state의 관리 패턴에 대한 내용을 다루며, 상태를 어디에 두어야 할지에 대한 좋은 예시를 제공합니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.