Prop Drilling

Prop Drilling이란 뭘까?

 

Prop Drilling이란 props를 '하위 컴포넌트로 전달하는 용도로만 쓰이는' 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.

다시말해 props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정을 말한다.

props drilling의 장점

• 컴포넌트 간에 데이터를 가장 쉽고 빠르게 전달할 수 있다.
• 작은 규모의 application에서 컴포넌트를 잘게 분해해서 props drilling을 하게되면, 코드를 실행하지 않고 정적으로 따라가는 것만으로도 어떤데이터가 어디에서 사용되는지 쉽게 파악할 수 있으며, 수정도 용이하다.

 

아래코드는 GrandFather에서 Mother로, Mother에서 Child로  props drilling을 하고있다.

위의 코드 에시에서는 시작컴포넌트~끝컴포넌트사이 전달컴포넌트가 1개 뿐이라 props의 전달과정이 쉽게 보이지만,  prop 전달이 10개가 넘어가는 과정을 거쳐야 한다면, 코드를 읽을 때 prop을 추적하기가 힘들어 진다.

그렇기 때문에 유지보수도 더욱 어려워진다.

import React from 'react';

function App() {
  return <GrandFather />;
}

function GrandFather() {
  const name = '전상국';
  return <Mother grandFatherName={name} />;
}

function Mother(props) {
  return <Child grandFatherName={props.grandFatherName} />;
}

function Child({ grandFatherName }) {
  return <div>{grandFatherName}</div>;
}

export default App;

 

props drilling으로 발생하는 문제

위와는 다르게 application의 규모가 커지면, 컴포넌트의 숫자가 많아지고, 그에따라 props도 많은 구간을 이동해야 하기 때문에 코드가 훨씬 복잡해진다.

• 필요보다 많은 props를 전달하다가, 컴포넌트 분리하는 과정에서 필요하지 않은 props가 계속 남거나 전달되는 문제
• props 전달을 누락했는데 default props가 사용되어 props의 미전달을 인지하기 어려운 문제
• props의 이름이 전달중에 변경되어 데이터를 추적하기 어려워지는 문제

 

props drilling으로 생기는 문제 피하는 방법

렌더링 될 컴포넌트를 불필요하게 여러 컴포넌트로 나누지 않는다

• React는 단 하나의 컴포넌트에 application 전체를 작성하더라도 기술적인 제약이 없다.
  따라서 불필요한 컴포넌트 쪼개기를 할 필요가 없다.
  컴포넌트를 재사용해야할 상황을 기다렸다 분할해도 괜찮으며, 불필요한 props drilling을 방지할 수 있다.

 

defaultprops를 필수 컴포넌트에 사용하지 않는다.

• deafultProps를 사용하면 필요한 props가 전달되지 못한 상황임에도 오류가 가려지게된다. 따라서 defaultProps를 필수적이지 않은 컴포넌트에만 사용하면 props drilling으로 인한 문제를 막을 수 있다.

가능한 관련성이 높은 곳에 state를 위치한다.

• 어떤 데이터가 application의 특정 위치에서만 필요하면 최상위 컴포넌트에 state를 위치시키는게 아닌, 해당 state를 필요로하는 컴포넌트들의 최소 공통 부모 컴포넌트에서 관리하는 것이 효율적이다.

상태관리 도구를 사용한다.

• 데이터를 필요로하는 컴포넌트가 props drilling의 깊숙히 위치한다면, React의 Context API를 사용하거나, Redux, Recoil 등의 외부 전역 상태관리 라이브러리를 사용해서 문제를 해결할 수 있다.

Children을 사용한다.

• children을 사용하여 리팩토링을 진행하면, 하나의 컴포넌트에서 값을 관리하고, 그 값을 하위요소로 전달할 때 코드추적이 어려워지지 않게됩니다.

import React from 'react';

function App() {
  const name = '김할아';
  return (
  <GrandFather>
    <Mother>
    	<Child grandFathername={name}/>
    </Mother>
  </GrandFather>);
}

function GrandFather() {
  return (
    <div>
    	<h3>1번 컴포넌트<h3>
        { children }
    </div>
  );
}

function Mother(props) {
  return (
    <div>
    	<h3>2번 컴포넌트<h3>
        { children }
    </div>
  );
}

function Child({ name }) {
  return <div>{ name }</div>;
}

export default App;

 

 

children이 뭔지 모르겠다면?

 

 

 

---

Prop Drilling?

 

 

프로퍼티 내리꽂기 (prop drilling)

 

[기술면접] 상태관리와 Props Drilling