[React] Props Drilling 이란? 해결법은?

Props Drilling

props drilling은 props를 하위 컴포넌트로 전달하는 과정에서 과도하게 하위 컴포넌트까지 내려간 것을 의미한다.

1depth 나 2depth까지는 헷갈리지 않고 문제가 없을수 있으나 5개에서 많게는 10개까지 수없이 뚫고 내려가야 한다면 코드를 읽을 때 해당 props를 추적하기도 불편하고, 일일히 props를 전달해야 한다는 불편함이 있다.

 

해결방법

1. 전역상태 관리

• context API 이용
  • 컨텍스트 API를 이용할 경우 데이터를 구독하는 모든 컴포넌트들이 재렌더링 되므로 전역상태관리 솔루션으로 사용되기 보단 지역적인 데이터 전달을 위해 사용하는 것이 좋다.
• 상태관리 라이브러리 이용
  • redux, recoil 등 본인의 개발 스타일과 페이지 성격에 알맞는 상태관리 라이브러리를 이용한다.

 

2. Children을 적극적으로 사용 (컴포넌트 합성)

children이란?

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있다. 범용적인 역할을 하는 sidebar 혹은 dialog와 같은 컴포넌트에서 특히 자주 볼 수 있다.

쉽게 말하면 태그와 태그 사이의 모든 내용을 표시하기 위해 사용되는 특수한 props이다.

children을 이용하면 컴포넌트의 깊이가 낮아져서 프롭 전달이 줄어들게 된다.

const Layout = (props) => {
	return <div>{props.children}</div>
}

---------------------------------------------------------------

const App = () => {
	<Layout>
    	<li>hi there</li>
        <li>여기에 내용 넣기</li>
	</Layout>
};