프론트엔드 개발 · 심화
단방향 데이터 흐름을 따르는 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에서 setState 호출이 항상 비동기적으로 동작한다고 말할 수 있을까요? React 18 이전과 이후의 자동 배치(automatic batching) 동작 차이를 setTimeout이나 Promise 콜백 내부에서의 setState를 예로 들어 설명해주세요.
- JSX는 결국 React.createElement(또는 jsx 런타임) 호출로 변환됩니다. 이 변환 결과인 element 객체가 어떤 구조를 가지며, 이것이 실제 DOM이 아니라 '설명(description)'에 불과하다는 점이 렌더링 파이프라인에서 어떤 의미를 갖는지 설명해주세요.
- 함수형 컴포넌트는 클로저를 기반으로 동작합니다. 이로 인해 발생하는 'stale closure(오래된 클로저)' 문제가 무엇이며, setInterval이나 이벤트 구독 안에서 state를 참조할 때 왜 의도치 않은 값이 보이는지, 그리고 이를 해결하는 방법을 설명해주세요.