React에서 한 구성 요소에서 다른 구성 요소로 데이터를 전달하는 방법은 무엇입니까?

소품은 구성 요소 간에 데이터를 전달하는 데 사용됩니다. 우리는 일반적으로 상위 구성 요소에서 하위 구성 요소로 데이터를 전달하는 데 사용합니다.

하지만 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 한다면 어떻게 해야 할까요? 형제 간에 데이터를 전달해야 하는 경우에는 어떻게 해야 합니까??

한 구성 요소에서 다른 구성 요소로 데이터를 전달하는 여러 가지 방법이 있을 수 있습니다.

1. 소품 사용

props를 사용하여 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있습니다. Example 1에 이에 대한 샘플 코드가 나와 있습니다.

|--- App.js
  |---- ParentComponent
       |----ChildComponent

2. React ContextAPI 또는 Redux와 같은 상태 관리 라이브러리 사용

Redux 또는 React ContextAPI는 애플리케이션을 관리하기 위한 중앙 상태 관리 기능을 제공합니다. 이는 모든 애플리케이션 상태가 Store라는 단일 위치에 저장됨을 의미합니다.

기존 데이터베이스가 애플리케이션의 기록 지점을 나타내는 것처럼 스토어는 클라이언트 측 '단일 소스' 또는 데이터베이스로 생각할 수 있습니다.



예제 #1 — Props를 사용하여 부모 구성 요소에서 자식 구성 요소로 데이터 전달

ParentComponent.js

import React from 'react'
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
render(){
    return(
    <div>
        <ChildComponent message="Data from first component"/>
    </div>
      );
   }
}

export default ParentComponent;

ChildComponent.js

import React from 'react';
const ChildComponent = (props) => {
    return(
          <h2> {props.message} </h2>
    );
}
export default ChildComponent;

위의 코드 조각은 부모 구성 요소에서 자식 구성 요소로 데이터를 전달하는 방법을 보여줍니다.

하지만 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 한다면 어떻게 될까요??? 이건 다음에 보자!

3. 소품을 콜백 함수로 사용하기

Redux 또는 React ContextAPI와 같은 상태 관리 라이브러리를 사용하지 않고 자식에서 부모 구성 요소로 데이터를 전달해야 하는 경우 콜백이 필요합니다.

---App  
 |---- Table.js
    |---- ListItem.js

시사



UseCase - 테이블의 행을 클릭하면 테이블에서 해당 행 데이터를 가져오고 테이블 기본 페이지에 표시하는 기능을 구현합니다.

솔루션 - 소품을 콜백 함수로 사용합니다. 아래 예에서 방법을 살펴보겠습니다!

import React from 'react'
import ListItem from './ListItem';

export class Table extends React.Component {

// Dummy data for the table
state = {
   data: tableData
}

getData = (rowData) => {
// This is the row data from ChildComponent
  console.log(rowData);
}

render(){
     return(
          <div>                 
              {this.state.data.map(item => (
                   <ListItem rowData={item} handleClick={this.getData}/>
              ))}
       </div>               
        );
    }
}


import React from 'react';
const ListItem = (props) => {
 return(
    // Using Props handleClick as callback function
          <div onClick={()=> props.handleClick(props.rowData)}>
                <p> {props.rowData.company} </p>
                <p> {props.rowData.contact} </p>
                <p> {props.rowData.country} </p>
           </div>
 );
}
export default ListItem;

이제 React Component 간의 데이터 전달이 어떻게 작동하는지 이해하셨기를 바랍니다. 잘못된 부분이 있으면 아래 댓글로 수정해주시면 감사하겠습니다. 나는 여전히 내가 배운 것을 배우고 문서화하고 있습니다.

이 게시물에 대한 귀하의 생각과 리뷰를 알고 싶습니다.

Subscribe to my email newsletter and stay updated!

건배!