React의 Prop Drilling은 무엇입니까?

React의 Prop 드릴링은 데이터가 여러 구성 요소 계층을 불필요하게 통과 할 때 발생합니다. React의 단방향 데이터 흐름으로 인해 발생하여 결합 및 유지 보수 문제와 같은 문제가 발생합니다. 일반적인 시나리오에는 주제 전달, API 데이터 또는 관련없는 구성 요소를 통한 상태가 포함됩니다. 그것을 줄이려면 : 1. 글로벌 데이터 액세스를 위해 React Context를 사용하십시오. 2. 상태를 적당히 들어 올리십시오. 3. 대형 앱의 상태 관리 라이브러리를 고려하십시오. 소규모 앱이나 얕은 나무에서는 제안 드릴링이 허용되지만 과도하게 사용하면 문제가됩니다.

React의 Prop Drilling은 중간 구성 요소가 데이터 자체가 필요하지 않은 경우에도 여러 계층의 자식 구성 요소를 통해 부모 구성 요소로부터 데이터를 전달하는 프로세스를 말합니다. 앱이 성장하기 시작하고 깊게 중첩 된 구성 요소가있을 때 일반적인 패턴입니다.

처음에는 괜찮아 보일 수 있지만 앱이 늘어나면 지저분하고 유지하기가 어려워 질 수 있습니다. 특히 관련된 많은 구성 요소가 트리에 깊이 묻힌 동일한 데이터에 액세스 해야하는 경우.

소품 시추가 발생하는 이유는 무엇입니까?

React의 단방향 데이터 흐름으로 인해 데이터가 어디에서 나오는지 쉽게 이해할 수 있습니다. 이는 모든 계층을 통해 수동으로 소품을 전달하는 것을 의미합니다. 예를 들어:

• 최상위 앱 구성 요소에 사용자 객체가 저장되어 있습니다.
• 깊게 중첩 된 설정 내부의 버튼 구성 요소는 사용자 이름을 표시해야합니다.
• 따라서 여러 구성 요소를 통해 사용자 객체를 전달하여 실제로 사용하는 구성 요소로 전달합니다.

이로 인해 구성 요소간에 불필요한 커플 링이 생성되고 리팩토링이 예상보다 어려워집니다.

다음은 몇 가지 일반적인 시나리오입니다.

• 여러 레이아웃 구성 요소를 통해 테마 또는 UI 환경 설정을 전달합니다
• API 응답 데이터를 양식 요소로 깊이 전송합니다
• 앱의 다른 섹션에서 인증 상태를 공유합니다

소품 시추를 줄이거 나 피하는 방법

당신은 소품 시추와 함께 살 필요가 없습니다. 사용 사례에 따라 사용할 수있는 몇 가지 전략과 도구가 있습니다.

글로벌 또는 크로스 절단 데이터에 React 컨텍스트를 사용하십시오

컨텍스트를 사용하면 모든 수준을 명시 적으로 전달하지 않고 테마, 사용자 설정 또는 인증 상태와 같은 값을 공유 할 수 있습니다. 많은 구성 요소가 하나뿐만 아니라 액세스 해야하는 데이터에 적합합니다.

예를 들어:

 const usercontext = react.createcontext ();

기능 앱 () {
  const [user] = usestate ({이름 : 'Alice'});

  반품 (
    <usercontext.provider value = {user}>
      <레이아웃 />
    </usercontext.provider>
  );
}

// 이제 모든 하위 구성 요소가 소품으로 수신하지 않고`사용자 &#39;에 액세스 할 수 있습니다.

상태를 들어 올리십시오 (그러나 너무 멀지는 않음)

때로는 공유 상태를 공통 조상으로 옮기면 복제를 줄이고 쉽게 관리 할 수 ​​있습니다. 그러나 이것은 다시 시추로 돌아 오기 전에 너무 많은 도움이됩니다.

국가 관리 도서관 사용을 고려하십시오

앱이 크고 복잡한 경우 Redux, Zustand 또는 Recoil과 같은 라이브러리는 모든 구성 요소에 직접 액세스 할 수있는 중앙 상태를 제공하여보다 확장 가능한 솔루션을 제공합니다.

Prop Drilling은 언제 허용됩니까?

믿거 나 말거나, 소품 시추가 항상 나쁘지는 않습니다. 소형 앱 또는 간단한 구성 요소 트리에서는 실제로 컨텍스트 또는 전체 상태 관리 시스템을 설정하는 것보다 더 명확하고 디버깅하기가 더 쉽습니다.

또한 소품이 한 ~ 2 레벨의 깊이 만 사용되는 경우, 전달하면 직접 물건을 직접적으로 유지하고 과도하게 엔지니어링을 피합니다.

문제가되고있는 징후를 주시하십시오.

• 여러 개의 관련성이없는 구성 요소를 통해 동일한 소품을 전달합니다
• 리팩토링은 한 가지 변화가 모든 곳에서 소품을 깨뜨리기 때문에 부서지기 쉬운 느낌입니다
• 데이터를 전달하기 위해 많은 보일러 플레이트를 작성하고 있습니다.

그렇습니다. Prop Drilling은 대부분의 반응 개발자가 일찍 발생하는 것입니다. 작은 경우에는 잘 작동하지만 다루기 힘들어집니다. 컨텍스트 또는 적절한 상태 관리 솔루션을 사용하면 일반적으로 앱이 성장함에 따라 도움이됩니다.

위 내용은 React의 Prop Drilling은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!