[React] props vs (전역상태+커스텀훅)

Question

안녕하세요.
다들 고생이 많으십니다. 
코린이 질문하나 합니다.

제가 리액트 프로젝트를 진행하면서
처음에는 컴포넌트에 props drilling을 이용해 프로젝트를 만들었습니다.

만들고 나니 뭔가 나중에 이 프로젝트를 볼 때 부모 컴포넌트를 찾아가며 코드를 파악해야 하는게 좀 아쉽다고 생각하여 
전역상태 + 커스텀 훅으로 변경하였습니다.

그런데 변경하고 나서 코드는 확실히 깔끔해지고 알아보기도 쉽긴 한데..
콘솔을 찍어보면 처음 구현했던 것 보다 훨씬 많이 찍힙니다.
랜더링이 더 많이 일어나는거 같은데.. 이럴경우
그냥 처음처음 props drilling를 사용하는게 나을까요?

황유정 · Answer

Provider 바로 하위에 있는 컴포넌트에 memo를 줘보세요.
memo, usecallback, usememo 등 사용하셔서 렌더링이 덜되도록 해보심을 추천드립니다.

김하림 · Answer

상태 관리에 대해서 고민하고 계시군요.
일단 저라면 잦은 렌더링을 유발하는 원인이 무엇인지를 찾아볼 것 같습니다.
상태를 전역 상태로 변경하셨다면, 상위 컴포넌트 혹은 React 외부 스코프에서 상태를 관리하고 계실텐데요.
말씀하신 문맥으로는 이 상태를 필요한 하위 컴포넌트에 전달하는 과정에서 불필요한 렌더링이 발생하는 것으로 보입니다.
이 부분을 React Dev Tools의 Profiler 또는 `console.log`를 찍어보면서 파악해보시면 좋을 것 같습니다.
원인이 파악되었으면, 하위 컴포넌트에 상태를 전달하는 과정 중간에 있는 컴포넌트들이 불필요한 렌더링을 일으키지 않도록 수정해야 합니다.
이 때 해결 방법은 전역 상태를 어떤 방식으로 관리하고 있느냐에 따라 달라집니다.
Memoization을 해야 할 수도 있고, Zustand 같은 상태 관리 라이브러리를 사용 중이시면 라이브러리 공식 문서에 리렌더링을 방지하는 방법에 대한 내용을 참고하시면 됩니다.
어떤 값은 props drilling이, 어떤 값은 전역 상태로 관리하는 게 유리할 수도 있습니다. 이 부분은 정답이 없기 때문에 코드를 작성하시면서 스스로 판단하셔야 합니다.