React에서 props를 무조건 줄이는게 옳을까요?

다른 개발자 분들의 의견이 궁금해지는 질문이네요 : ) 제가 이해한 바로는 "props로 자식 컴포넌트에게 react query 응답 데이터를 전달해야할까?" 의 질문으로 이해했습니다. 저의 경우에는 개발시에 데이터를 호출 및 가공처리를 담당하는 컴포넌트와 UI만을 담당하는 컴포넌트를 구분해서 개발하는편입니다. 그 이유는, 대부분의 버그나 이슈는 예측하기 어려운 곳에서 나타나는데요, 데이터를 Api를 이용해 호출해오거나 그 결과를 가공하는 과정이 대부분 해당이 된다고 생각해서에요. 그래서 react query를 쓰더라도 무조건적으로 데이터를 한곳에서 호출 후 자식에게 내려준다는 개념보다는 특정 기능을 하는 페이지를 개발할때 해당 페이지가 어떠한 비즈니스 기능들을 갖고 있는지 구분하고 각 비즈니스별로 Container 라는 컴포넌트를 만들어 해당 파일에서 필요한 데이터를 호출 및 관리하고 있습니다. 공통된 데이터 호출일지라도 react query가 캐싱된 데이터를 가져다가 사용해주기 때문에 중복호출 처리에 대해서는 react query를 믿고 그 역할을 위임하는 편입니다. 이후 각 비즈니스별로 필요한 UI들을 자식컴포넌트로 만들고 각 UI컴포넌트에서 필요로 하는 데이터를 Container에서 내려주고 UI 컴포넌트들은 데이터만 받아서 화면을 구성하도록 개발하고 있습니다. 질문에 대한 답변이 되셨을지 잘 모르겠네요 😅

안녕하세요~ 이미 훌륭한 답변을 남겨주신 분이 계시지만 제 생각도 남겨놓겠습니다! 무조건 props 를 줄이는 것보다는 정말 필요한 props 는 넘기고 자식 컴포넌트 단에서 직접 활용할 수 있는 부분은 컴포넌트에서 활용하는 케이스가 좋은 케이스지 않을까 생각합니다. 정답이 정해진 것이 아닌 컴포넌트의 역할과 성격, props 로 넘겨주고 싶은 데이터가 어떤 데이터에 따라서 달라지지 않을까 생각이 듭니다. 예를 들어서 비즈니스 로직을 담아야하는 자식 컴포넌트 같은 경우엔 자식 컴포넌트더라도 필요하다면 직접 훅을 통해서 데이터를 결합할 수 있을것 같습니다. 만약 공통으로 사용중인 컴포넌트라면 추상화 레벨을 높여서 필요한 데이터를 props 로 받아서 컴포넌트를 만들어줄 것 같습니다. 다른 케이스로는 react-query 를 사용하는데 서버에서 list 데이터를 가져와 각 child 로 뿌리고 싶다면, 부모 컴포넌트에서 쿼리해와 list 를 map 을 돌리며 각 child 에게 필요한 데이터를 props 로 뿌려주는 케이스도 있을 것 같습니다. 이처럼 다양한 케이스에서 질문자님이 원하는 방법을 최적화 해서 작업하는게 옳은 방법이지 않을까 생각합니다!

안녕하세요! React에서 props를 전달하는 방식은 크게 두 가지입니다. 하나는 컴포넌트 내에서 직접 데이터를 가져오는 방식이고, 다른 하나는 부모 컴포넌트로부터 props로 전달받는 방식입니다. 이 두 가지 방식 중 어느 방식을 사용해야 하는지는 상황에 따라 다릅니다. 보통은 컴포넌트 간의 데이터 전달이 필요할 때 props를 이용하여 전달합니다. 하지만 데이터를 전달하기 위해서 매번 props를 이용하면 코드가 복잡해지고 관리하기 어려워질 수 있습니다. 따라서, 각 컴포넌트가 가져와야 할 데이터가 매우 간단하거나 해당 컴포넌트에서만 사용하는 경우에는 컴포넌트 내에서 데이터를 가져오는 방식이 적절할 수 있습니다. 하지만, 데이터가 복잡하거나 여러 컴포넌트에서 공유되는 경우에는 부모 컴포넌트에서 props를 이용하여 전달하는 것이 좋습니다. 따라서, 규모가 큰 프로젝트에서는 데이터를 전달하는 방식에 대해서 잘 고려해야 합니다. 필요한 경우, 상태 관리 라이브러리를 도입하는 것도 좋은 방법일 수 있습니다. 결론적으로, 컴포넌트 사이에서 데이터를 전달하는 방식에는 각각 장단점이 있으며 상황에 따라 다르므로, 적절한 방법을 선택하는 것이 중요합니다.