다양한 상태 관리 전략.

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

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

프롭 드릴링에 대해 이해해 봅시다. 하지만 다음을 시도해보세요.

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

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

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

function App() {

  const [user, setUser] = useState({ name: "John Doe" });

return (

    


      

    


  );

}

function ParentComponent({ user }) {

  return (

    


      

    


  );

}

function Child({ user }) {

  return (

    


      

    


  );

}

function Grandchild({ user }) {

  return 
Hello, {user.name}!
;

}

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

이에 대한 대답은 단순한 예/아니요가 아니며 전적으로 사용 사례에 따라 다릅니다. 애플리케이션의 컨텍스트 및 규모와 같은 다양한 요소가 있습니다.

• 소규모 프로젝트: 포트폴리오, 기본 제품 페이지 등 주로 기본 웹사이트인 소규모 프로젝트의 경우 소품 드릴링을 사용해도 좋습니다. 이러한 애플리케이션에 대해 mobx 또는 Redux와 같은 전체 상태 관리 도구를 설정할 필요가 없습니다.

• 상태 관리는 프로젝트에 불필요한 복잡성을 도입했지만 프로펠러 드릴링을 사용하면 쉽게 피할 수 있습니다.

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

1. *데이터 공유
   * Prop 드릴링은 깊게 중첩된 하위 구성 요소가 상위 구성 요소의 데이터나 기능에 액세스해야 할 때 일반적으로 사용됩니다. 예를 들어 상위 구성 요소가 애플리케이션의 상태 또는 상태를 업데이트하는 함수를 보유하고 하위 구성 요소가 해당 상태에 액세스하거나 수정해야 하는 경우 소품 드릴링은 해당 데이터 또는 함수에 액세스할 수 있도록 하는 방법입니다.

2. *명시적 데이터 흐름
   * Prop 드릴링의 주요 이점 중 하나는 애플리케이션 내에서 명확하고 명시적인 데이터 흐름을 유지한다는 것입니다. 각 구성 요소를 통해 props를 전달하면 데이터가 어디서 오고 어떻게 전달되는지 항상 명확해 지므로 코드 디버깅과 이해가 단순화될 수 있습니다.

3. *소규모 애플리케이션의 단순성
   * 소규모 응용 프로그램이나 구성 요소 계층 구조가 상대적으로 얕은 경우 프롭 드릴링은 추가 도구나 라이브러리가 필요하지 않은 간단한 솔루션입니다. 이를 통해 개발자는 복잡성을 도입하지 않고도 상태를 관리하고 데이터를 전달할 수 있습니다.

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

1. 리액트 컨텍스트 API

• 정의: 모든 레벨에서 수동으로 props를 전달할 필요 없이 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해주는 React의 내장 기능입니다.

• 사용 시기: 테마, 사용자 인증 상태 또는 로케일 설정과 같은 글로벌 데이터를 공유하는 데 적합합니다.

• Context API를 사용하면 구성 요소 트리의 모든 수준을 통해 소품이 전달되는 것을 방지할 수 있습니다. 컨텍스트를 사용하면 각 레벨을 통해 props를 수동으로 전달할 필요 없이 모든 구성 요소에서 액세스할 수 있는 전역 상태를 만들 수 있습니다.

장점:

• 프롭 드릴링의 필요성을 줄입니다.

• 여러 구성요소 간의 데이터 공유를 단순화합니다.

단점:

• 숨겨진 종속성을 도입하여 구성 요소의 재사용 가능성을 낮출 수 있습니다.

• 과도하게 사용하면 디버깅이 더 복잡해질 수 있습니다.

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

• 정의: 애플리케이션 상태를 관리하고 공유하는 구조화된 방법을 제공하는 외부 라이브러리.

• 사용 시기: 상태 관리가 복잡하고 예측 가능한 구조가 필요한 대규모 애플리케이션에 이상적입니다.

장점:

• 상태 관리를 중앙 집중화합니다.

• 디버깅 및 테스트를 용이하게 합니다.

• 시간 이동 디버깅 및 기타 고급 기능을 지원합니다.

단점:

• 복잡성과 학습 곡선이 추가됩니다.

• 간단한 애플리케이션에는 과잉일 수 있습니다.

3. 맞춤형 후크

• 정의: 상태 저장 논리를 캡슐화하는 React의 재사용 가능한 함수로 구성 요소 간에 논리를 쉽게 공유할 수 있습니다.

• 사용 시기: prop 드릴링 없이 논리 및 상태 저장 동작을 공유하는 데 유용합니다.

장점:

• 코드 재사용 및 청결성을 촉진합니다.

• 구성요소를 간결하고 집중적으로 유지합니다.

단점:

• 모든 데이터 공유 시나리오에 적합하지 않을 수 있습니다.

• React Hooks API에 대한 이해가 필요합니다.

4. 구성 및 고차 구성요소

• 정의: 구성요소를 추가 기능으로 래핑하여 구성요소를 향상시킬 수 있는 패턴입니다.

• 사용 시기: 구성 요소의 구조를 수정하지 않고 소품과 동작을 구성 요소에 주입하는 데 유용합니다.

장점:

• 재사용 가능하고 구성 가능한 코드를 권장합니다.

• 프로펠러 드릴 작업을 일부 제거할 수 있습니다.

단점:

• 구성요소 트리를 더 복잡하게 만들 수 있습니다.

• 명시적인 prop 전달에 비해 데이터 흐름을 추적하기가 더 어려울 수 있습니다.

소품의 단점 드릴링 React

1. 코드 가독성: 소품 드릴링은 구성 요소 트리의 여러 레이어를 통해 소품을 추적해야 하기 때문에 구성 요소를 이해하기 어렵게 만들 수 있습니다.

2. 유지 관리: 애플리케이션이 성장함에 따라 이러한 코드를 관리하고 리팩토링하는 것이 어려워집니다. 많은 구성요소가 포함된 경우 소품 구조를 변경하는 것이 번거로울 수 있습니다.

3. 성능: props가 더 높은 수준에서 변경되고 여러 레이어로 전달되면 불필요한 다시 렌더링이 발생할 수 있습니다. 깊게 중첩된 구성 요소에만 데이터가 필요한 경우에도 마찬가지입니다.

4. 확장성 문제: 애플리케이션이 성장하고 구성 요소 트리가 깊어짐에 따라 소품 드릴링이 번거롭고 관리가 어려워질 수 있습니다. 코드가 장황해지고 유지 관리가 어려워질 수 있습니다.

5. 중복 Props: 중간 구성 요소는 사용하지 않는 Prop을 받고 전달해야 하므로 불필요한 결합과 잠재적 혼란이 발생합니다.

6. 유지 관리 어려움: 데이터 구조의 변경으로 인해 구성 요소의 여러 계층에 걸쳐 업데이트가 필요할 수 있으므로 구성 요소 업데이트 또는 리팩터링은 오류가 발생하기 쉽습니다.

최종 생각

여러분은 여러 계층의 구성 요소를 통해 데이터를 전달하는 기술인 React의 Prop 드릴링에 대해 이해해야 합니다. 프롭 드릴링은 구성 요소 구조가 단순한 소규모 애플리케이션에 적합하지만 애플리케이션이 성장함에 따라 번거롭고 관리하기 어려울 수 있습니다.

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

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

저자 소개

Apoorv는 노련한 소프트웨어 개발자입니다. **소셜 네트워크에 연결할 수 있습니다.
최신 큐레이팅된 콘텐츠를 보려면 Apoorv의 뉴스레터를 구독하세요.