[React][Context] Prop drilling 과 useContext (1/2)

Prop Drilling (프로퍼티 내리꽂기)

Typescript를 공부하며, Prop interface의 중복을 모듈화 하여 해소할 수 있을까 했는데,

애초에 많이 중복된다는 것은, prop drilling 문제의 가능성이 있을 수 있다고 하여 공부해보았다!

Prop Drilling, 그게 뭔가요?

Prop Drilling 은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서,

React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정을 말한다.

 

import React from "react";

export default function App() {
  return (
    <div className="App">
      <FirstComponent content="Who needs me?" />
    </div>
  );
}

function FirstComponent({ content }) {
  return (
    <div>
      <h3>I am the first component</h3>;
      <SecondComponent content={content} />|
    </div>
  );
}

function SecondComponent({ content }) {
  return (
    <div>
      <h3>I am the second component</h3>;
      <ThirdComponent content={content} />
    </div>
  );
}

function ThirdComponent({ content }) {
  return (
    <div>
      <h3>I am the third component</h3>;
      <ComponentNeedingProps content={content} />
    </div>
  );
}

function ComponentNeedingProps({ content }) {
  return <h3>{content}</h3>;
}

 

전역 변수나, 전역 상태 관리를 하게 되면 애플리케이션의 데이터 모델을 혼란스럽게 만들기 쉽다.

그에 비해 Prop drilling 기법은 값이 어디서 사용되는지 더 명시적이며, 애플리케이션 다른 영역에 어떤 영향을 주는지 파악하기 용이하다.

Prop Drilling, 마냥 좋은 거네요?

prop 전달이 3~5개 정도의 컴포넌트라면 문제가 안 될 것이다.

하지만 prop 전달이 10개, 15개 같이 더 많은 과정을 거치게 된다면 어떻게 될까요?

그러면 코드를 읽을 때 해당 prop을 추적하기 힘들어지고, 그렇기 때문에 유지보수도 더욱 어려워질 것이다.

특히 다음과 같은 경우에요!

• 일부 데이터의 자료형을 바꾸게 되는 경우
• 프로퍼티의 이름이 중간에 변경되어 값을 추적하기 어려운 경우
• 필요보다 많은 프로퍼티를 전달하다가 컴포넌트를 분리하는 과정에서 필요 없는 프로퍼티가 계속 남는 경우
• 필요보다 적은 프로퍼티를 전달하면서 동시에 defaultProps를 과용한 결과로 필요한 프로퍼티가 전달되지 않은 상황을 문제를 인지하지 어려운 경우

Prop Drilling 문제, 그럼 어떻게 해결해야 하나요?

1. 관련된 상태는 최대한 가까이 보관해야 한다. 최소 공통 부모 컴포넌트에서!

2. children 적극 사용

 

import React from "react";

export default function App() {
  const content = "Who needs me?";
 return (
    <div className="App">
      <FirstComponent>
        <SecondComponent>
          <ThirdComponent>
            <ComponentNeedingProps content={content}  />
          </ThirdComponent>
        </SecondComponent>
      </FirstComponent>
    </div>
  );
}

function FirstComponent({ children }) {
  return (
    <div>
      <h3>I am the first component</h3>;
     { children }
    </div>
  );
}

function SecondComponent({ children }) {
  return (
    <div>
      <h3>I am the second component</h3>;
     {children}
    </div>
  );
}

function ThirdComponent({ children }) {
  return (
    <div>
      <h3>I am the third component</h3>
        {children}
    </div>
  );
}

function ComponentNeedingProps({ content }) {
  return <h3>{content}</h3>
}

 

3. 전역 상태관리 (Recoil, Reduex, Mobx, ...)

4. React Context

 

재미있는 사실은 단 하나의 리액트 컴포넌트에 애플리케이션 전체를 작성한다고 한들 기술적으로 제약된 부분이 전혀 없습니다.
전체 애플리케이션의 상태를 관리하고 하나의 거대한 render 메소드를 사용하는 것도 가능합니다.
물론 이 방법을 권장하는 것은 아니지만요.
한번 생각해볼 만한 부분이라고 봅니다. :)

출처: Kent C. Dodds (https://kentcdodds.com/blog/prop-drilling)

 

자, 그러면! Prop drilling 현상을 개선할 수 있는 방법 중 하나인, 4. useContext Hook를 알아봅시다.

 

https://snupi.tistory.com/186

---

참고 자료:

React에서 Prop Drilling과 해결 방법

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

리액트 컨텍스트

Context - React

상태 관리 도구로서의 React Context