구성 요소 간의 React 메서드 참조

이 기사는 Flutterwave의 후원을 받았습니다. Flutterwave는 전 세계 어디에서나 고객으로부터 온라인과 오프라인으로 결제를 하고 수락하는 가장 쉬운 방법입니다. 완전 무료입니다!

구성 요소는 동일한 구성 요소에서 함수 호출이 실행될 때 상태가 변경될 뿐만 아니라 구성 요소가 다른 구성 요소에 대한 참조로 함수 호출을 실행할 수 있습니다.

이전 기사에서 구성 요소 상태가 다른 구성 요소(onChange 입력 필드)의 입력 필드에서 입력을 변경했을 때 이를 이미 보았습니다. 거기에는 입력 요소가 사용되었고 여기에서는 버튼 요소가 대신 사용됩니다( onClick a 버튼).

다음은 동일한 구성 요소에서 상태를 변경하거나 관리하는 예입니다.

사람/Person.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
        </div>
    );
};

export default Person;

위의 예에서는 이 구성 요소의 버튼에 전달된 메서드가 없습니다. 즉, 동일한 구성 요소에서 변경이 이루어집니다.
onClick 이벤트는 아래와 같이 동일한 구성 요소에서 button를 클릭하면 시작됩니다.

App.js

import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: {
      name: 'Bello',
      language: 'React',
      id: '2sdr3'
    }
  });

  const personNameHandler = () => {
    setState({
      persons: {
        name: 'Andela',
        language: 'React',
        id: '2sdr3'
      }
    })
  };

  return (
    <div>
      <Person
        name={state.persons.name}
        language={state.persons.language}
        id={state.persons.id} />
      <button onClick={personNameHandler}>Change Person State</button>
    </div>
  );
};

export default App;

앞에서 말했듯이 구성 요소 메서드는 다른 구성 요소에 참조로 전달될 수 있습니다. 이는 구성 요소가 다른 구성 요소에서 onClick의 클릭 시 함수 호출 실행 시 상태를 변경할 수 있음을 의미합니다.

사람/Person.js

import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
            <button onClick={props.click}>Change Person State</button>
        </div>
    );
};

export default Person;

위의 예에서 다른 구성 요소의 button 메소드 또는 기능 호출을 속성으로 참조하여 다른 구성 요소의 onClick에서 button를 클릭하면 함수 호출이 실행됩니다.

아래 예를 참조하십시오.

App.js

import React from "react";
import { useState } from "react";
import "./App.css";
import Person from "./Person/Person";

const App = () => {
  const [state, setState] = useState({
    persons: {
      name: "Bello",
      language: "React",
      id: "2sdr3"
    }
  });

  const personNameHandler = () => {
    setState({
      persons: {
        name: "Andela",
        language: "React",
        id: "2sdr3"
      }
    });
  };

  return (
    <div>
      <Person
        name={state.persons.name}
        language={state.persons.language}
        id={state.persons.id}
        click={personNameHandler}
      />
    </div>
  );
};

export default App;

personNameHandler를 클릭하면 새 상태를 반환하는 click 함수에 myName 매개변수가 있다고 가정해 보겠습니다.

import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: {
      name: 'Bello',
      language: 'React',
      id: '2sdr3'
    }
  });

  const personNameHandler = myName => {
    setState({
      persons: {
        name: myName,
        language: 'React',
        id: '2sdr3'
      }
    })
  };

  return (
    <div>
      <Person
        name={state.persons.name}
        language={state.persons.language}
        id={state.persons.id}
        click={() => personNameHandler('Andela')} />
    </div>
  );
};

export default App;

버튼을 클릭하면 personNameHandler 인수가 button 함수에 전달됩니다. 즉, 구성 요소 상태가 'Andela'에서 이름 함수personNameHandler(myName)에서 Bello로 변경됩니다.

클래스 기반 구성 요소에서 위의 코드 조각은 다음과 같이 다시 작성할 수 있습니다.

import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: {
      name: 'Bello',
      language: 'React',
      id: '2sdr3'
    }
  };

  personNameHandler = myName => {
    this.setState({
      persons: {
        name: myName,
        language: 'React',
        id: '2sdr3'
      }
    })
  };

  render() {
    return (
      <div>
        <Person
          name={this.state.persons.name}
          language={this.state.persons.language}
          id={this.state.persons.id}
          click={() => this.personNameHandler('Andela')} />
      </div>
    );
  };
}

export default App;

클래스 기반 구성 요소에서 Andela를 personNameHandler()로 바꿀 수 있습니다.



행복한 코딩!!!




.ltag__user__id__428113 .follow-action-button {
배경색: #000000 !중요;
색상: #ffffff !중요;
테두리 색상: #000000 !중요;
}

벨로

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

테크스택 | 플러터웨이브

Flutterwave에서 후원하는 Techstack 기사. Flutterwave는 전 세계 어디에서나 고객으로부터 온라인과 오프라인 모두에서 결제를 하고 수락하는 가장 쉬운 방법입니다. 완전 무료입니다! 또한 signup 을(를) 사용할 때 Flutterwave 달러 교환 카드를 받습니다. 온라인 상점을 열고 전 세계 어디에서나 비즈니스를 수행하십시오.



Sign up today to get started

Support 내가 하는 일과 계속해서 무료 콘텐츠를 만들도록 밀어붙이는 것.