[React] Props Drilling 은 무엇이고 어떻게 해결하는가

Props Drilling

Props Drilling 이란 props 를 하위 컴포넌트로 전달하는 과정에서 몇개의 컴포넌트를 뚫고 들어가는 형태를 의미한다.

이러한 Props Drilling 은 적으면 아무런 문제가 되지 않지만, 만약에 10개가 넘는 Props Drilling 이 일어난다면 그 props 를 추적하는데 어려움을 겪을것이다.

해결법

전역 상태관리 라이브러리 사용

Redux, Jotai, Recoil 등을 사용하여 해당 값이 필요한 컴포넌트에서 직접 불러올 수 있다.

Children 을 적극적으로 사용

export default function App() {
  const content = "Who needs me?";
  return (
    <div className="App">
      <First>
        <Second>
          <Third>
            <Props content={content} />
          </Third>
        </Second>
      </First>
    </div>
  );
}

function First({ children }) {
  return (
    <div>
      <h3>first</h3>;{children}
    </div>
  );
}

function Second({ children }) {
  return (
    <div>
      <h3>second</h3>;{children}
    </div>
  );
}

function Third({ children }) {
  return (
    <div>
      <h3>third</h3>;{children}
    </div>
  );
}

function Props({ content }) {
  return <div>{content}</div>;
}

이런 식으로 콘텐츠의 전달을 하위요소까지 보낼수있다.