면접 - react props drilling 해결

⸻

질문:
React 프로젝트에서 상태 공유 시 props drilling 문제를 어떻게 해결하셨나요?
또한 이 과정에서 발생할 수 있는 컴포넌트 재렌더링 문제를 최소화하는 방법도 말씀해 주세요.

답변 스크립트:
props drilling 문제를 해결하기 위해 React에서는 Context API를 기본적으로 지원합니다.
Context를 활용하면 상위 컴포넌트에서 하위 컴포넌트로 깊게 상태를 전달할 필요 없이, 전역처럼 필요한 컴포넌트에서 직접 상태를 사용할 수 있습니다.

추가로 저는 상황에 따라 Redux, React Query, Recoil, Zustand 같은 상태 관리 라이브러리를 사용해왔습니다.
특히 최근에는 가벼운 상태 관리가 필요한 경우 Zustand를 주로 사용했는데, 이 방법은 Redux처럼 별도의 리듀서 설정 없이 간편하게 상태를 선언하고 관리할 수 있으며, LocalStorage 같은 영속성 저장 기능과도 쉽게 연동할 수 있어 실무에서 생산성을 높일 수 있었습니다.

비동기 데이터 관리가 필요한 경우에는 React Query를 사용해 서버 상태를 효율적으로 관리했고, 이를 통해 캐싱, 로딩, 에러 상태를 자동화했습니다.

컴포넌트 재렌더링 문제를 줄이기 위해서는, 서버에서 필요한 초기 데이터를 미리 패칭해두고, 변경이 자주 일어나지 않는 상태는 상태 관리 스토어에 유지했습니다.
또한 컴포넌트 최적화를 위해 React.memo, useMemo, useCallback 같은 메모이제이션 기법을 적극적으로 활용해 불필요한 렌더링을 방지했습니다.

⸻