패스잇
프론트엔드 개발 · 심화

단방향 데이터 흐름을 따르는 React에서, 부모-자식 간 상태를 끌어올리는(lifting state up) 패턴이 깊은 컴포넌트 트리에서 'prop drilling' 문제를 일으킵니다. 이 문제를 Context, composition(children 합성), 상태 관리 라이브러리 중 무엇으로 풀지 판단하는 기준을 설명해주세요.

힌트 · 재사용성·리렌더 범위·결합도 측면에서 각 해법의 트레이드오프 관점에서 접근하세요.

Context APIcomposition상태 관리 라이브러리prop drilling컴포넌트 트리 깊이

모범답안

prop drilling 문제는 Context API, composition, 상태 관리 라이브러리로 해결할 수 있습니다.

Context API는 전역적으로 접근해야 하는 상태에 적합합니다. 다만, 상태 변경 시 관련 없는 컴포넌트까지 리렌더링될 수 있어 성능 이슈가 발생할 수 있습니다.

Composition은 컴포넌트 재사용성을 높이고 결합도를 낮추는 데 효과적입니다. children prop을 활용하여 상태를 전달하는 방식은 prop drilling을 완화하지만, 상태가 깊이 중첩되면 여전히 복잡해질 수 있습니다.

상태 관리 라이브러리는 복잡하고 빈번하게 변경되는 전역 상태 관리에 가장 강력한 솔루션입니다. Redux, Zustand 등은 상태 변경 범위를 명확히 하고 최적화 기능을 제공하여 성능 문제를 해결하는 데 유리합니다.

결론적으로, 상태의 범위와 변경 빈도, 컴포넌트 트리 깊이, 그리고 팀의 선호도 등을 종합적으로 고려하여 가장 적합한 방법을 선택해야 합니다.

읽었다면, 이제 직접 답해볼 차례예요

패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.

함께 보는 React 면접 질문

← React 면접 질문 전체 보기