React Prop 드릴링: 사용해야 할까요?-JS 튜토리얼-php.cn

다른 상태 관리 전략.

React Prop Drilling은 상위 구성 요소에서 하위 구성 요소로 데이터를 드릴링하는 것입니다. 이는 레벨 전체에서 액세스할 수 있는 데이터를 전달하는 것입니다.

React Prop Drilling: Should You Use It?

데이터는 다른 프로토콜을 사용하여 데이터를 표시하거나 가져오는 하위 구성 요소로 전달됩니다. 우리는 반응 구성 요소의 다시 렌더링을 피하기 위해 많은 캐싱을 수행하지만 애플리케이션이 복잡하고 깊게 중첩된 경우에는 이렇게 합니다. 소품이 업데이트될 때마다 다시 렌더링이 발생합니다.

프롭 드릴링에 대해 이해하고 시도해 보세요

예를 들어 다음과 같은 구성 요소 계층 구조가 있는 경우:

ParentComponent
  ├── IntermediateComponent1
  │     └── IntermediateComponent2
  │           └── TargetComponent

로그인 후 복사

ParentComponent에 TargetComponent에 필요한 일부 데이터가 있는 경우 prop 드릴링에는 해당 데이터가 최종적으로 TargetComponent에 도달하기 전에 ParentComponent에서 IntermediateComponent1 및 IntermediateComponent2를 통해 전달하는 작업이 포함됩니다. 각 중간 구성요소는 데이터를 props로 받아 다음 레벨로 전달합니다.

function App() {<br>
  const [user, setUser] = useState({ name: "John Doe" });

<p>return (<br>
    <div><br>
      <Parent user={user} /><br>
    </div><br>
  );<br>
}</p>

<p>function ParentComponent({ user }) {<br>
  return (<br>
    <div><br>
      <Child user={user} /><br>
    </div><br>
  );<br>
}</p>

<p>function Child({ user }) {<br>
  return (<br>
    <div><br>
      <Grandchild user={user} /><br>
    </div><br>
  );<br>
}</p>

<p>function Grandchild({ user }) {<br>
  return <div>Hello, {user.name}!</div>;<br>
}<br>
</p>

로그인 후 복사

프롭 드릴링: 좋은가요, 나쁜가요?

이에 대한 대답은 단순한 예/아니요가 아니며 전적으로 사용 사례에 따라 다릅니다. 애플리케이션의 맥락, 규모 등 다양한 요소가 있습니다.

소규모 프로젝트: 주로 포트폴리오, 기본 제품 페이지 등 기본 웹사이트를 중심으로 하는 소규모 프로젝트의 경우 소품 드릴링을 사용해도 좋습니다. 이러한 애플리케이션에는 mobx나 Redux와 같은 전체 상태 관리 도구를 설정할 필요가 없습니다.
상태 관리로 인해 프로젝트가 불필요하게 복잡해졌으나 프롭 드릴링을 사용하면 이를 쉽게 피할 수 있습니다.

React에서 prop 드릴링을 사용합니다.

*데이터 공유
* Prop 드릴링은 깊게 중첩된 하위 구성 요소가 상위 구성 요소의 데이터나 기능에 액세스해야 할 때 일반적으로 사용됩니다. 예를 들어 상위 구성 요소가 애플리케이션의 상태 또는 상태를 업데이트하는 함수를 보유하고 하위 구성 요소가 해당 상태에 액세스하거나 수정해야 하는 경우 소품 드릴링은 해당 데이터 또는 기능에 액세스할 수 있도록 하는 방법입니다.
*명시적 데이터 흐름
* Prop 드릴링의 주요 이점 중 하나는 애플리케이션 내에서 명확하고 명시적인 데이터 흐름을 유지한다는 것입니다. 각 구성 요소를 통해 props를 전달하면 데이터가 어디서 오고 어떻게 전달되는지 항상 명확해 지므로 코드 디버깅과 이해가 단순화될 수 있습니다.
*소규모 애플리케이션의 단순성
* 소규모 애플리케이션이나 구성 요소 계층이 상대적으로 얕은 경우 프롭 드릴링은 추가 도구나 라이브러리가 필요하지 않은 간단한 솔루션입니다. 이를 통해 개발자는 복잡성을 도입하지 않고도 상태를 관리하고 데이터를 전달할 수 있습니다.

React의 소품 드릴링에 대한 대안입니다.

1. 리액트 컨텍스트 API

정의: 모든 레벨에서 수동으로 props를 전달할 필요 없이 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해주는 React의 내장 기능입니다.
사용 시기: 테마, 사용자 인증 상태, 로케일 설정과 같은 글로벌 데이터 공유에 적합합니다.
Context API를 사용하면 구성 요소 트리의 모든 수준에서 props가 전달되는 것을 방지할 수 있습니다. 컨텍스트를 사용하면 각 레벨에서 props를 수동으로 전달할 필요 없이 모든 구성요소에서 액세스할 수 있는 전역 상태를 생성할 수 있습니다.

장점:

프롭 드릴링의 필요성이 줄어듭니다.
여러 구성요소 간의 데이터 공유를 단순화합니다.

단점:

숨겨진 종속성을 도입하여 구성 요소의 재사용 가능성을 낮출 수 있습니다.
과도하게 사용하면 디버깅이 더 복잡해질 수 있습니다.

2. 상태 관리 라이브러리(예: Redux, MobX)

정의: 애플리케이션 상태를 관리하고 공유하는 구조화된 방법을 제공하는 외부 라이브러리
사용 시기: 상태 관리가 복잡하고 예측 가능한 구조가 필요한 대규모 애플리케이션에 이상적입니다.

장점:

상태 관리를 중앙 집중화합니다.
디버깅 및 테스트가 용이합니다.
시간 이동 디버깅 및 기타 고급 기능을 지원합니다.

단점:

복잡성과 학습 곡선이 추가됩니다.
단순한 적용에는 과잉일 수 있습니다.

3. 맞춤형 후크

정의: 상태 저장 논리를 캡슐화하여 구성 요소 간에 논리를 쉽게 공유할 수 있게 해주는 React의 재사용 가능한 함수입니다.
사용 시기: prop 드릴링 없이 논리 및 상태 저장 동작을 공유하는 데 유용합니다.

장점:

코드 재사용 및 청결성을 촉진합니다.
구성요소를 간결하고 집중적으로 유지합니다.

단점:

모든 데이터 공유 시나리오에 적합하지 않을 수 있습니다.
React Hooks API에 대한 이해가 필요합니다.

4. 구성 및 고차 구성요소

정의: 추가 기능으로 구성 요소를 래핑하여 구성 요소를 향상시킬 수 있는 패턴입니다.
사용 시기: 구성 요소의 구조를 수정하지 않고 소품과 동작을 구성 요소에 삽입하는 데 유용합니다.

장점:

재사용 및 구성 가능한 코드를 권장합니다.
프로펠러 드릴링이 발생하는 경우를 없앨 수 있습니다.

단점:

컴포넌트 트리를 더 복잡하게 만들 수 있습니다.
명시적인 prop 전달에 비해 데이터 흐름을 추적하기가 더 어려울 수 있습니다.

props의 단점 드릴링 React

코드 가독성: Prop 드릴링은 구성 요소 트리의 여러 레이어를 통해 Prop을 추적해야 하기 때문에 구성 요소를 이해하기 어렵게 만들 수 있습니다.
유지 관리: 애플리케이션이 성장함에 따라 이러한 코드를 관리하고 리팩토링하는 것이 어려워집니다. 많은 구성 요소가 포함된 경우 소품 구조를 변경하는 것이 번거로울 수 있습니다.
성능: props가 더 높은 수준에서 변경되고 여러 레이어로 전달되는 경우, 깊게 중첩된 구성 요소에만 데이터가 필요한 경우에도 불필요한 다시 렌더링이 발생할 수 있습니다.
확장성 문제: 애플리케이션이 성장하고 구성 요소 트리가 깊어짐에 따라 소품 드릴링이 번거롭고 관리가 어려워질 수 있습니다. 코드가 장황해지고 유지 관리가 어려워질 수 있습니다.
중복 Props: 중간 구성요소는 사용하지 않는 Prop을 강제로 받아서 전달해야 하므로 불필요한 결합과 잠재적 혼란이 발생합니다.
유지 관리의 어려움: 데이터 구조의 변경으로 인해 구성 요소의 여러 계층에 걸쳐 업데이트가 필요할 수 있으므로 구성 요소 업데이트 또는 리팩토링 시 오류가 발생할 수 있습니다.

최종 생각

다중 구성 요소 계층을 통해 데이터를 전달하는 기술인 React의 Prop Drilling에 대해 이해하시기 바랍니다. 프롭 드릴링은 구성 요소 구조가 단순한 소규모 응용 분야에 적합하지만 응용 분야가 커짐에 따라 번거롭고 관리하기 어려울 수 있습니다.

코드 가독성 저하, 유지 관리의 어려움, 불필요한 재렌더링으로 인한 성능 문제 등의 문제가 있습니다. 이러한 제한 사항을 극복하기 위해 React Context API, 상태 관리 라이브러리(예: Redux, MobX) 및 사용자 정의 후크와 같은 대안이 제안되지만 자체적으로 복잡합니다.

기본적으로 프롭 드릴링은 특정 시나리오에서 유용하지만 프로젝트가 성장함에 따라 더욱 확장 가능한 솔루션을 고려하는 것이 중요합니다.