React의 하위 구성 요소에 상태 전달

1. 상태 객체의 목적
2. 상위 구성 요소에서 하위 구성 요소로 데이터 전달
3. React의 하위 구성 요소에 상태 전달
4. 자식 구성 요소에 상태를 전달하는 컨텍스트 API

프런트 엔드 개발자는 종종 웹 애플리케이션의 동적 기능을 유지하기 위해 클라이언트 측에서 상태 패턴을 설정해야 합니다. 프레임워크 없이도 가능하지만 많은 노력이 필요합니다.

React에는 내부 상태 시스템이 있으며 상태 관리와 관련된 많은 골칫거리를 제거합니다.

상태 객체의 목적

React에서는 상태를 사용하여 외부 데이터, 사용자 입력 및 변경될 수 있는 기타 값을 저장합니다. 예를 들어 특정 상태 값을 업데이트한 다음 JSX에서 상태 값을 참조하고 표시하는 텍스트 입력을 가질 수 있습니다.

따라서 입력이 상태를 업데이트한 다음 상태를 참조하여 값을 표시합니다. 상태의 값을 변경하면 다시 렌더링이 트리거됩니다.

상위 구성 요소에서 하위 구성 요소로 데이터 전달

부모에서 자식으로 상태를 전달하는 가장 일반적이고 간단한 방법은 props를 사용하여 수동으로 수행하는 것입니다. 트리 맨 위에 있는 구성 요소에서 직계 자식으로, 그 자식이 그것을 받아 props를 통해 자신의 자식에게 전달하는 식으로 최종 목적지에 도달할 때까지 계속됩니다.

예를 살펴보겠습니다.

export default function App() {
  return (
    <div className="App">
      <Box number={11} />
      <Box number={15} />
      <Box number={18} />
    </div>
  );
}
function Box(props) {
  return <div>{props.number}</div>;
}

우리는 부모로부터 자식에게 가치를 물려주었습니다. 이 경우 부모에서 직계 자식으로 한 단계만 전달하면 됩니다.

자식 구성 요소에 자체 자식이 있는 자체 자식 구성 요소가 있는 경우 부모에서 자식으로 데이터를 전달하는 데 시간이 많이 걸릴 수 있습니다.

경우에 따라 이 데이터를 사용하지 않는 하위 구성 요소에 데이터를 전달할 수 있습니다. 이를 소품 드릴링이라고 합니다.

당신이 그것을 많이하는 것을 알게되면 대안을 찾아야합니다.

React의 하위 구성 요소에 상태 전달

공식 React 문서에서는 개발자가 모든 상태 데이터를 부모 구성 요소에 저장할 것을 권장합니다. 이 관행을 단일 진실 소스라고 합니다. 자식 구성 요소는 텍스트 상자와 같은 입력 요소를 가질 수 있습니다.

React를 사용하면 부모 구성 요소의 상태를 업데이트하는 함수에 대한 참조를 전달할 수 있습니다. 자식 구성 요소에서 이 함수에 대한 참조를 호출하여 이 자식 구성 요소의 로컬 값을 기반으로 부모 구성 요소의 상태를 업데이트할 수 있습니다.

대부분의 경우 React 웹 앱은 구성 요소 트리로 구성됩니다. 하위가 여러 개인 상위 구성요소가 있습니다.

이러한 각 자식은 자신의 자식을 여러 개 가질 수 있으며 구성 요소 트리에는 수십 개의 수준이 있을 수 있습니다. 그리고 핵심은 구성 요소 재사용성이므로 하나의 구성 요소가 수십 개의 인스턴스를 가질 수 있습니다.

React에서 상태(및 기타 값)는 props 개체를 사용하여 부모에서 자식으로 전달됩니다. 일반 HTML 요소에 속성을 설정하는 것과 유사하게 작동합니다.

대신 JSX에서 이 사용자 지정 속성을 설정하면 하위 구성 요소에서 해당 값을 사용할 수 있습니다.

자식 구성 요소에 상태 변수를 전달하는 예를 살펴보겠습니다.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [text, setText] = useState("");
  return (
    <div className="App">
      <input type="Text" onChange={(e) => setText(e.target.value)} />
      <Box paragraph={text} />
    </div>
  );
}
function Box(props) {
  return <div>{props.paragraph}</div>;
}

라이브 데모

자식 구성 요소는 데이터를 부모에게 전달할 수 없습니다. 이 패턴을 단방향 데이터 흐름이라고 합니다.

상태 데이터는 부모에 저장되고 자식의 구성 요소로 전달됩니다.

위의 예에서는 부모와 자식이 하나씩만 있습니다. 이와 같은 간단한 구성 요소 트리에서는 props를 사용하는 것이 좋습니다. 그러나 이 접근 방식은 자신의 자식이 있는 자식 구성 요소가 너무 많을 때 번거로워집니다.

다행스럽게도 React는 대안을 제공합니다. 이를 사용하면 모든 수준에서 값을 전달하지 않고 자식 구성 요소에서 즉시 사용할 수 있는 부모의 값을 만들 수 있습니다.

자식 구성 요소에 상태를 전달하는 컨텍스트 API

React의 Context API를 사용하면 개발자가 props를 사용하지 않고 하위 구성 요소에 상태 값을 전달할 수 있습니다. 데이터는 모든 어린이가 액세스할 수 있게 됩니다.

단일 데이터 조각을 여러 하위 구성 요소에 개별적으로 전달하는 것보다 훨씬 쉽습니다.

이 값을 많은 자식 구성 요소에 전달해야 한다고 상상해 보십시오. 다음과 같이 해야 합니다.

export default function App() {
  return (
    <>
      <Child darkMode={true} />
      <Child darkMode={true} />
      <Child darkMode={true} />
    </>
  );
}

function Child ({ darkMode }) {
  return (
    <>
      <Text darkMode={theme} />
      <Video darkMode={theme} />
      <Visual darkMode={theme} />
      <Card darkMode={theme} />
    </>
  );
}

이 구성 요소에서 상단의 상위 구성 요소에는 <Text>, <Video>, <Visual>, <Card> 등과 같은 하위 구성 요소가 있는 3개의 <Child> 구성 요소가 있습니다. . 우리는 이 데이터를 이 아이들과 그들이 가질 수 있는 모든 아이들에게 전달해야 합니다.

코드를 보면 이 접근 방식이 비효율적이라는 것이 분명해집니다.

테마 데이터(다크 모드 설정) 및 사용자 데이터(인증 정보)와 같은 상태 값은 자식 구성 요소의 시각적 요소와 기능을 사용자 지정하는 데 필요할 수 있습니다. 수동으로 하나씩 전달하는 대신 React 개발자는 Context API를 사용하여 props를 통해 수행하지 않고 자식 구성 요소에 상태를 전달할 수 있습니다.

컨텍스트를 사용하여 하위 구성 요소에 상태 전달

React 라이브러리에는 React 개발자가 컨텍스트를 생성하는 데 사용할 수 있는 createContext() 메서드가 포함되어 있습니다. Context API 구현을 네 가지 쉬운 단계로 나누면 더 쉽습니다.

1. createContext() 메서드를 사용하여 컨텍스트를 생성합니다.
2. 구성 요소 트리 주위에 컨텍스트 공급자를 래핑합니다.
3. 구성 요소 트리 전체에서 공유하려는 값과 동일한 컨텍스트 공급자의 값 소품을 설정합니다.
4. useContext() 후크를 사용하여 하위 구성 요소의 값에 액세스합니다.

예제 코드를 생성하고 각 단계를 살펴보겠습니다.

먼저 다른 구성 요소의 부모가 될 기능적 구성 요소를 정의합니다. createContext() 메서드를 사용하여 이 상위 구성 요소에 컨텍스트를 생성하고 dataContext 변수에 참조를 저장합니다.

import "./styles.css";
import React from "react";
import { useState, useContext } from "react";
const dataContext = React.createContext();

export default function App() {
  const [darkMode, setDarkMode] = useState(true);
  return (
    <dataContext.Provider value={darkMode}>
      <div>
        <Child />
      </div>
    </dataContext.Provider>
  );
}
function Child() {
  return (
    <div>
      <Grandchild />
    </div>
  );
}
function Grandchild() {
  const setting = useContext(dataContext);
  console.log(setting);
  return (
    <div
      style={{
        width: 300,
        height: 300,
        backgroundColor: setting ? "black" : "white",
        color: setting ? "white" : "black"
      }}
    >
      Hello, World
    </div>
  );
}

상위 App 구성 요소에는 자체 하위 구성 요소가 있는 하위 구성 요소가 있습니다.

부모 구성 요소의 전체 구성 요소 트리를 컨텍스트 공급자로 래핑하고 컨텍스트 공급자에 darkMode 특성을 설정합니다. 이 값은 모든 하위에서 사용할 수 있습니다.

하위 구성 요소에서 useContext() 후크를 사용해야 합니다. 이는 부모 구성 요소에서 Context 제공자에 설정된 값을 사용하는 데 필요합니다.

이 경우 darkMode 값을 사용하여 하위 구성 요소에서 조건부 스타일을 설정합니다. 상위 구성 요소에서 이 값을 변경할 수 있습니다(useState() 후크에 전달된 초기 값 변경).

또한 콘솔로 이동하여 darkMode 상태가 Context API를 통해 상위에서 하위로 성공적으로 전달되었다는 확인을 확인하십시오.