자식 컴포넌트 props 문의 드립니다.

Question

강사님 안녕하세요. 오늘도 영상 시청하던 중, 궁금한 점이 하나 생겨서 문의드립니다. 부모 컴포넌트에서 useSelector 로 얻은 상태값 일부를 자식 컴포넌트에 props 로 전달하여 자식컴포넌트에서 활용하는 식으로 코딩하는 과정을 확인하게 됐는데요. 자식컴포넌트에서 직접 useSelector 를 사용하여 얻는 것과 어떤 차이점이 있을까요? 일단, props 로 내려보내는 방식의 경우, 자식컴포넌트가 특정 리덕스 state 에 의존하지 않게 되므로 다른 부모컴포넌트에서 재활용할 수 있을 것 같아보이는데요. 만약 자식 컴포넌트를 재활용할 일이 없는 경우에는 자식 쪽에서 직접 useSelector 를 사용하는 방법이 props 를 이용하는 것과 또 다른 차이가 있을까요?

이재승 · Answer

말씀하신대로 리덕스 state에 대한 의존성을 허락하느냐 마느냐의 차이가 있습니다. 아래 글에서 말하는 식으로 presentation 컴포넌트라는 것을 구분하면 재사용성이 좋아지는데요 https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 프로젝트의 성격에 따라서 리덕스 state에 대한 의존성을 추가하는 것이 재사용성에 미치는 영향은 달라질 수 있습니다. 만약 재사용성에 미치는 영향이 작다고 판단되면 편하게 여러 곳에서  useSelector 를 사용해도 된다고 생각합니다. 재사용성 말고 다른 차이가 있는지는 모르겠네요 (약간의 성능 차이 정도) 조금 다른 얘기이긴 하지만, 리덕스 state에 대한 의존성을 추가하면 유닛테스트나 스토리북 등의 UI Test 시 많이 번거로울 수 있습니다. 이 역시 프로젝트마다 컴포넌트 테스트를 어느 정도로 또는 어떤 구조로 작성하는지 다르기 때문에 번거로운 정도는 다르겠지만요.