다른 레벨에 있는 컴포넌트간 데이터를 넘겨주는것은 중요하고도 헷갈리는 부분이다. 이번 포스트에서는 리액트 컴포넌트간 데이터의 흐름을 세 가지 주된 방법을 다뤄보겠다.

더욱 실용적인 방법으로 설명하기 위해 간단한 리액트 앱을 만들겠다.

npx create-react-app sample_app

그러고 나서 components라는 폴더를 src 폴더 안에 만들고 3가지 컴포넌트를 생성하였다.

/src
|__ /components
|   |__ Parent.js
|   |__ Child1.js
|   |__ Child2.js
|
|__ App.js 

App.js 는 모두에게 Root 컴포넌트이고 부모 컴포넌트는 내부에서 불려져야 한다.

import React, { Component } from 'react';
import './App.css';
import Parent from './components/Parent';

class App extends Component {
  render() {
    return (
      <div className="App">
          <Parent/>
      </div>
    );
  }
}

export default App;

위의 셋업을 잘 기억하자.
이제부터 아래의 세 가지 케이스를 다뤄보겠다.

• Parent to Child
• Child to Parent
• Child to Child

Parent to Child

부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘겨주는것은 위의 세 가지 케이스중 가장 쉬운 케이스이다.

자식이 부모 컴포넌트로부터 프로퍼티를 상속하기 위해서는 단순히 props를 이용하면 된다.

Parent 컴포넌트에서, callback으로 Child1에게 다음과 같은 방법으로 값을 보내줄 수 있다.

<Child1 valueFromParent={this.value}/>

그리고 value의 진짜 값을 부모 클래스의 내부에서 선언한다.

Child1에서는 this.props.valueFromParent를 사용하여 간단히 접근할 수 있다.

Parent.js

import React, {Component} from 'react';
import Child1 from './Child1';
class Parent extends Component{
    value="Value From Parent";
    render(){
        return(
            <div>
                <Child1 valueFromParent={this.value}/>
            </div>
        );
    }
}
export default Parent;

Child.js

import React, {Component} from 'react';
class Child1 extends Component{
    render(){
        return(
            <div>
                <h2>{this.props.valueFromParent}</h2>
            </div>
        );
    }
}
export default Child1;

Child to Parent

Child에서 Parent로 데이터를 넘겨주는 것은 헷갈릴 수 있는 작업이다. 우선, Child컴포넌트로부터 데이터를 넘겨받을Parent 컴포넌트 안에서 callback함수를 만들어야 한다.

다음으로, 이 callback함수를 이전의 방법과 같은 방식으로 Child 컴포넌트에 넘겨준다.

<Child1 functionCallFromParent={this.parentFunction.bind(this)}/>

그리고 이제 parentFunction을 Child1에서 호출할 수 있고 데이터를 다음과 같이 넘겨줄 수 있다.

this.props.functionCallFromParent(<data_to_pass>)

그럼 코드는 다음과 같다.

Parent.js

import React, {Component} from 'react';
import Child1 from './Child1';
class Parent extends Component{
    parentFunction=(data_from_child)=>{
        console.log(data_from_child);
    }    
    render(){
        return(
            <div>      
                <Child1 functionCallFromParent={this.parentFunction.bind(this)}/>
            </div>
        );
    }
}
export default Parent;

Child.js

import React, {Component} from 'react';
class Child1 extends Component{
    childFunction=(e)=>{
        e.preventDefault();
        this.props.functionCallFromParent("Hello From Child1");
    }
    render(){
        return(
            <div>   
                <button onClick={this.childFunction.bind(this)}>Click</button>
            </div>
        );
    }
}
export default Child1;

위의 코드에서 Child1의 버튼이 눌렸을때, Parent컴포넌트 안에 있는 parentFunction을 호출하고 넘겨진 데이터인 Hello From Child1를 출력한다.

하지만 이 넘겨진 데이터는 그 함수 안에서만 사용될 수 있다. Parent의 다른 부분에서도 사용되기 위해서는 이 값을 state에 할당하면 된다.

constructor(props){
    super(props);
    this.state={
        value_key=""
    }
}
parentFunction=(data_from_child)=>{
    this.setState({value_key:data_from_child});
}

Child to Child

형제 컴포넌트간 데이터를 넘겨주는 것은 위의 두 케이스에서 사용한 방법을 모두 이용해야 한다.
이때, Child1.js의 코드는 앞에서 사용한 코드와 동일하다.

Parent.js

import React, {Component} from 'react';
import Child1 from './Child1';
import Child2 from './Child2';
class Parent extends Component{
    constructor(props){
        super(props);
        this.state={
            value_key:""
        }
    }
    parentFunction=(data_from_child)=>{
        this.setState({value_key:data_from_child});
    }
    render(){
        return(
            <div>      
                <Child1 functionCallFromParent={this.parentFunction.bind(this)}/>
                <Child2 valueFromParent={this.state.value_key}/>
            </div>
        );
    }
}
export default Parent;

Child2.js

import React, {Component} from 'react';
class Child2 extends Component{
    render(){
        return(
            <div>
                <h2>Child 2</h2>
                <h2>{this.props.valueFromParent}</h2>
            </div>
        );
    }
}
export default Child2;

참고 블로그