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

안녕하세요 이정환입니다.

말씀하신대로 그렇게 작업하셔도 기능은 정상적으로 작동합니다. 그러나 이렇게 작업하는 이유는 자식 컴포넌트가 부모 컴포넌트의 State에 강하게 의존하지 않게 하기 위함 입니다.

setTodos 함수를 그대로 내려받아 사용하게 되면, 향후에 버튼의 동작이 다른 방식으로 변경될 때에 수정해야 할 사항이 많아지게 되는데요, 이렇게 함수로 별도로 분리해 두게 되면 함수 내부만 수정하면 되기 때문에 보다 변경에 열려있다고 볼 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. khhan1990님.

Editor 컴포넌트 안으로 setTodos 함수를 이동시키지 않고 App.tsx에 onClickAdd 함수를 남기는 이유는 React의 컴포넌트 구조와 상태 관리에 관련된 베스트 프랙티스를 지키기 위함입니다.

이유:

1. 단일 소스의 진실(SSOT, Single Source of Truth):

   • React에서 상태 관리는 일반적으로 최상위 컴포넌트(App 혹은 필요한 최하위 공통 조상)에 위치합니다. 이는 데이터의 출처가 명확하게 하나로 정해짐으로써 데이터 흐름을 이해하기 쉽게 만들어 줍니다.
     

2. 컴포넌트 재사용성:

   • setTodos와 같은 상태 변경 함수를 하위 컴포넌트로 이동시키면 그 컴포넌트는 특정한 상태 변경 메커니즘에 의존하게 되며, 재사용성이 떨어질 수 있습니다. Editor 컴포넌트는 데이터를 추가하는 UI 역할만을 담당하며, 상태 변경에 대한 세부사항은 상위에서 관리하게 되면 모듈화가 더 명확해집니다.
     

3. 상태 변경의 부작용 방지:

   • 상태가 필요 이상으로 여러 곳에 분산되면 관리가 어려워지고, 예기치 못한 부작용이 발생할 수 있습니다. 특히 상태가 여러 컴포넌트에 분산된 경우, 각 상태 업데이트가 어떤 영향을 미칠지 추적하기 어렵습니다.
     

기능적으로는 Editor로 setTodos를 옮겨도 작동하겠지만, 유지보수와 코드 관리 측면에서 어려움이 있을 수 있습니다.

이와 관련하여 살펴볼 수 있는 유사한 질문과 답변이 존재하니, 링크를 참조하시기를 권장드립니다:

• 리액트에서 상태를 어디에 두어야 하는지 궁금합니다
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면,이어소개 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.