[React] Props Drilling

📚 개념

Props Drilling이란 props를 통해 하위 컴포넌트로 data를 넘겨줄때 3~5개 정도의 컴포넌트라면 관리하기에 어렵지 않지만 10개 20개 30개 .. 전달해야하는 컴포넌트들의 갯수가 많아질수록 유지보수할때의 문제가 생기는 것을 말합니다.

아래 예시를 통해 Props Drilling에 대해 자세히 알아보겠습니다.

예시

import React from 'react';

function App() {
  const data = `드디어 도착`;
  return (
    <div>
      <One data={data} />
    </div>
  );
}

function One({ data }) {
  return (
    <div>
      <h3>첫번째 컴포넌트 입니다.</h3>
      <Two data={data} />
    </div>
  );
}

function Two({ data }) {
  return (
    <div>
      <h3>두번째 컴포넌트 입니다.</h3>
      <Three data={data} />
    </div>
  );
}

function Three({ data }) {
  return (
    <div>
      <h3>세번째 컴포넌트 입니다.</h3>
      <Four data={data} />
    </div>
  );
}

function Four({ data }) {
  return (
    <div>
      <h3>네번째 컴포넌트 입니다.</h3>
      <ShowProps data={data} />
    </div>
  );
}

function ShowProps({ data }) {
  return <h3>{data}</h3>;
}

export default App;

위와 같이 data라는 props를 최하단의 자식 컴포넌트가 데이터를 사용하기 위해 전달하고 있고 이때 상위 부모와 자식 컴포넌트 사이의 깊이가 커져 관리하는것에 대한 어려움이 있습니다.

⚒️ 해결 방안

위와 같은 문제를 해결하기 위해서는 여러 방법들이 존재하는데 대표적으로는 상태관리 라이브러리를 사용하는 것 입니다. 대표적으로는 redux , MobX 등이 존재합니다. 또한 useContext라는 React Hook을 사용할 수 있는데 우리는 useContext를 사용하여 위에 코드를 리팩토링 해보도록 하겠습니다.

import React, { useContext } from 'react';
import { DataContext } from './hooks/DataContext';

function App() {
  const data = `드디어 도착`;
  return (
    <DataContext.Provider value={data}>
      <One />
    </DataContext.Provider>
  );
}

function One() {
  return (
    <div>
      <h3>첫번째 컴포넌트 입니다.</h3>
      <Two />
    </div>
  );
}

function Two() {
  return (
    <div>
      <h3>두번째 컴포넌트 입니다.</h3>
      <Three />
    </div>
  );
}

function Three() {
  return (
    <div>
      <h3>세번째 컴포넌트 입니다.</h3>
      <Four />
    </div>
  );
}

function Four() {
  return (
    <div>
      <h3>네번째 컴포넌트 입니다.</h3>
      <ShowProps />
    </div>
  );
}

function ShowProps() {
  const data = useContext(DataContext);
  return <h3>{data}</h3>;
}

export default App;

❗️ 주의할 점

다만 useContext를 사용할 경우에는 컴포넌트를 재사용하기 어려워 질 수 있어서 꼭 필요할때만 사용해야 하고 만일 Props drilling을 피하기 위한 목적이라면 Component Composition ( 컴포넌트 합성 )을 먼저 고려해야 한다.

📌 참고

Props Drilling
별코딩님의 useContext 유튜브 강의