React 앱 깊숙이 묻혀 있는 구성 요소에 일부 데이터를 가져와야 하는 상황에 처한 적이 있나요? 이 중요한 정보는 높은 수준에 있지만 구성 요소는 트리 아래에 있으므로 이제 거기에 도달하기 위해 여러 레이어를 통해 소품을 전달해야 합니다. 이것이 우리가 "프롭 드릴링"이라고 부르는 것입니다.

상위 구성 요소의 정보를 해당 하위 구성 요소에 소품으로 보내는 것으로 시작합니다. 그런 다음 해당 자식은 메시지가 실제로 필요한 구성 요소에 최종적으로 도달할 때까지 동일한 정보를 자신의 자식에게 전달하며 이러한 방식으로 계층별로 전달합니다.

따라서 컴포넌트 트리를 통해 이동하는 많은 소품을 처리하고 약간 과하다는 느낌이 든다면 아마도 소품 드릴링을 다루고 있는 것입니다. 이것이 무엇인지, 그리고 데이터를 처리하는 대체 방법을 찾는 것이 왜 가치가 있는지 알아보겠습니다.

프롭 드릴링이란 무엇입니까?

"스레딩 소품" 또는 "구성 요소 체이닝"이라고도 하는 소품 드릴링은 소품을 사용하여 일련의 중첩된 하위 구성 요소를 통해 상위 구성 요소의 데이터를 전달하는 방법입니다.

이는 Prop을 필요로 하는 깊게 중첩된 하위 구성 요소에 가져오기 위해 여러 수준의 구성 요소를 통해 Prop을 보내야 할 때 발생합니다. 체인의 모든 중간 구성 요소는 Prop을 직접 사용하지 않더라도 Prop을 전달해야 합니다.

교실 은유

교사가 책상의 긴 줄에 있는 마지막 학생과 중요한 정보를 공유해야 한다고 상상해 보십시오. 교사는 메시지를 직접 전달하는 대신 첫 번째 학생에게 전달합니다. 그런 다음 이 학생은 다음 학생에게 메시지를 전달하고, 마지막 학생에게 도달할 때까지 행의 각 학생이 메시지를 다음 학생에게 전달합니다. 이 시나리오에서 각 학생은 중개자 역할을 하여 정보가 소스에서 최종 수신자에게 전달되도록 합니다. 이 프로세스는 실제로 필요한 구성 요소에 도달하기 전에 데이터가 여러 구성 요소 계층을 통해 전달되는 프로그래밍의 소품 드릴링을 반영합니다.

코드 예제에서 이를 살펴보겠습니다.

// Parent Component (Teacher)
function Teacher() {
  const messageToLastStudent = "Helo, Last Student!";
  return (
    
  );
}

// Child Component (First Student)
function FirstStudent({ message }) {
  // The message is passed directly as prop, without be used here.
  return (
    
  );
}

// Grandson Component (Last Student)
function LastStudent({ message }) {
  return 
{message}
; // Here the message is finally used.
}

프롭 드릴링의 어려움

Prop 드릴링은 앱의 구성 요소 트리가 작고 단순할 때 매우 편리합니다. 상위 항목의 데이터를 중첩된 하위 항목 몇 개에 전달하는 것은 쉽습니다. 하지만 앱이 성장함에 따라 몇 가지 문제가 발생할 수 있습니다.

• 복잡성 코드: 소품 드릴링은 특히 대규모 구성 요소 트리에서 복잡성과 추가 상용구를 추가할 수 있습니다. 구성 요소가 더 많이 중첩되면 소품 흐름을 추적하는 것이 더 어려워지고 코드베이스가 지저분해질 수 있습니다.

• 성능에 미치는 영향: 데이터를 여러 계층의 구성 요소에 전달하면 특히 대용량 데이터로 작업하는 경우 성능에 부정적인 영향을 미칠 수 있습니다. 이는 속성이 변경되면 체인의 각 구성 요소를 다시 렌더링해야 하므로 불필요한 다시 렌더링이 발생할 수 있기 때문입니다.

프롭 드릴링 문제 해결

하지만 모든 것을 잃은 것은 아닙니다! 우리는 소품 드릴링을 피하고 애플리케이션 성능을 유지하는 효율적인 방법을 가지고 있습니다.

• Context API: React의 Context API는 컴포넌트 트리의 모든 수준을 통해 prop을 전달하지 않고도 컴포넌트 간에 직접 데이터를 공유할 수 있도록 하여 prop 드릴링을 방지하는 데 도움이 됩니다. React.createContext 및 Context.Provider를 사용하면 공급자 내의 모든 구성 요소에서 데이터를 사용할 수 있으므로 props를 여러 계층으로 전달할 필요가 없습니다. 이를 통해 데이터 관리가 단순화되고 구성 요소 계층 구조의 복잡성이 줄어듭니다.

• 상태 관리 라이브러리:
  상태 관리 라이브러리는 애플리케이션 데이터에 대한 중앙 집중식 저장소를 제공하여 소품 드릴링을 방지하는 데 도움이 됩니다. Redux, MobX 및 Zustand와 같은 라이브러리는 전역 상태를 관리하여 구성 요소가 모든 레벨을 통해 소품을 전달하지 않고도 데이터에 액세스하고 업데이트할 수 있도록 합니다. 예를 들어 Redux는 전역 저장소를 사용하고 연결 또는 사용Selector 후크를 사용하여 구성 요소를 상태에 연결함으로써 데이터 액세스를 간단하게 만들고 심층 prop 전달의 필요성을 줄입니다.

• 고차 부품(HOC):
  HOC(고차 구성 요소)는 추가 기능과 데이터로 구성 요소를 래핑하여 프로펠러 드릴링을 방지하는 데 도움이 됩니다. HOC는 컴포넌트를 가져와서 props나 향상된 동작이 삽입된 새 컴포넌트를 반환합니다. 이를 통해 모든 레이어에 소품을 전달하지 않고도 깊게 중첩된 구성 요소에 데이터나 기능을 제공할 수 있습니다. 예를 들어 HOC는 구성 요소를 래핑하여 사용자 인증 데이터를 제공함으로써 데이터 액세스를 간소화하고 prop 전달을 줄일 수 있습니다.

결론

간단히 말하면, 소품 드릴링은 몇 가지 구성 요소 레이어를 통해 데이터를 전달하는 빠른 수정이 될 수 있지만 앱이 성장함에 따라 빠르게 혼란스러워질 수 있습니다. 소규모 앱에서는 잘 작동하지만 대규모 프로젝트에서는 코드가 복잡해지고 유지 관리 문제가 발생할 수 있습니다. 다행스럽게도 Context API, 상태 관리 라이브러리, 고차 구성요소와 같은 도구가 있어 소품 드릴링 트랩을 피하고 코드베이스를 깔끔하고 관리 가능하게 유지하는 데 도움이 됩니다. 따라서 다음에 소품을 다룰 때 원활한 실행을 위해 다음 대안을 고려해보세요!

미래를 건설하자! ?