React 구성 요소 간에 데이터를 전달하는 방법은 무엇입니까?

React 구성 요소 간에 데이터를 전달하고 싶다고 가정해 보겠습니다. 내가 본 것처럼 두 가지 방법이 있습니다. 제가 여기서 보여드릴 것은 그 중 하나일 뿐입니다. 외부를 사용하지 않으므로 React 기술을 연습하는 좋은 방법(IMO)입니다. 제 경우에는 한 구성 요소에서 다른 구성 요소로 사용자 입력을 가져와야 했습니다. 이를 위해 세 번째(부모) 구성 요소를 사용하여 이 둘 사이에 데이터를 전달하는 방법을 배웠습니다. 실제로 그렇게 하는 것이 얼마나 쉬운지 보여주려고 노력할 것입니다.

상위 컴포넌트에서 하위 컴포넌트로 데이터 전달

가장 쉬운 단계부터 시작하겠습니다. 부모에서 자식으로 데이터 보내기. 발견적 목적을 위해 자식에 대한 함수 구성 요소를 사용합니다. App이라는 상위 구성 요소가 있다고 가정해 보겠습니다. 이 예제에서 상태를 사용할 것이기 때문에 클래스 구성 요소로 만들어 보겠습니다.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { data: "some data here" };
  }

  render() {
    return (
      <div>
        <Child1 parentData={this.state.data} />
      </div>
    );
  }
}

보시다시피, App 구성 요소의 상태에서 "data"개체를 사용하는 props "parentData"와 함께 이미 Child1이라는 구성 요소를 render 메서드에 포함했습니다.

2단계: Child1이라는 함수 구성 요소를 선언하고 그 안에 parentData 소품을 전달합니다.

function Child1(props) {
  return <div>The data we're getting is : {props.parentData}</div>;
}

그게 다야, 사실. 여기서 우리는 부모에서 자식으로 데이터를 보내고 자식에서 렌더링 메서드에서 사용할 수 있습니다. React에서 이러한 작업이 어떻게 작동하는지 이상하게 느끼는 사람이 있는지 모르겠습니다. 왜냐하면 저는 그렇게 하기 때문입니다. 하지만 일단 익숙해지면 React로 플레이하는 것이 훨씬 편안해집니다.

자식에서 부모 구성 요소로(그리고 거기에서 다른 자식으로)

이제 자식에서 부모로 데이터를 전달하는 방법을 살펴보겠습니다. 부모 구성 요소가 매체이기 때문에 우리는 자식 간에 데이터를 전달할 것입니다. App 클래스 구성 요소를 다시 작성해 보겠습니다.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = { data: "some data here" };
  }
  handleCallback = (childData) => {
    this.setState({ data: childData });
  };
  render() {
    return (
      <div>
        <Child1 parentData={this.state.data} />
        <Child2 fromChild={this.handleCallback} />

      </div>
    );
  }
}

App 클래스 구성 요소로 몇 가지 새로운 작업을 수행했습니다.
- "fromChild"소품으로 가져온 데이터로 상태를 설정하는 handleCallback 함수를 추가했습니다.
-handleCallback 함수를 호출하는 fromChild 소품으로 Child2 구성 요소를 렌더링했습니다.

이제 Child2 구성 요소를 작성해야 합니다. 휴리스틱 목적으로 다시 이것을 클래스 구성 요소로 작성할 것입니다. 이것은 자식이 같은 유형의 구성 요소일 필요가 없다는 것을 보여줍니다. 실제로 하나는 클래스 구성 요소가 될 수 있고 다른 하나는 함수 구성 요소가 될 수 있습니다. 그냥 우리가 알고 있습니다.

다음은 Child2 구성 요소입니다.

class Child2 extends Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
  sendData = () => {
    this.props.fromChild("data sent by the child");
  };

  render() {
    return (
      <div>
        <button onClick={this.sendData}>Send data</button>
      </div>
    );
  }
}

우리는 여기에 무엇을 가지고 있습니까?
- fromChild 소품이 있는 sendData 함수
- 클릭 시 sendData 함수를 호출하는 버튼.
이제 어떻게 될까요? 글쎄, 우리는 그것을 App 부모 구성 요소 내부에 렌더링하는 동안 Child2 구성 요소에 fromChild 소품을 넣었다는 것을 기억하십시오. 그 fromChild 소품은 차례로 App 구성 요소의 상태를 업데이트하는 handleCallback 함수를 호출했습니다. 그리고 기억하세요, 우리의 첫 번째 자식 컴포넌트는 무엇을 하고 있었나요? 정확히는 앱 구성 요소의 상태에서 데이터를 가져오는 중이었습니다. 이제 위 단계의 결과로 첫 번째 자식 구성 요소는 부모를 매체로 사용하여 두 번째 자식 구성 요소에서 제공한 데이터를 가져옵니다.

이 코드 줄을 작성하면 버튼이 표시되고 버튼을 클릭하면 텍스트(즉, 데이터)가 변경됩니다.

이 설명이 명확하기를 바랍니다. 글을 쓰면서 React가 얼마나 이상한지 깨달았습니다. 하지만 일단 익숙해지면 일이 아주 자동으로 되기 시작합니다.

어쨌든 즐겁게 코딩을 계속하세요!