React : 자식에서 부모 컴포넌트로 값 전달

constructor(props){
  super(props);
  this.setParentValue = this.setParentValue.bind(this);
}

부모에서 자식으로 값을 상속할때는 props를 이용해서 값을 전달 한다.

 

// 부모 컴포넌트에서 자식으로 id, name 값 전달.
<Child
	id={index}
	name={myname}
/>

// 자식에서 부모 값 받기.

const {id} = this.props;

그렇다면 자식에서 특정한 함수, 또는 조건시에서 부모컴포넌트로 값을 전달하는 방법은 어떻게 할까?

부모에서는 받을 수 있는 방법은 없지만 함수를 자식에게 전달하고 그 함수를 조작하는 것으로 자식에서 부모의 값을 컨트롤 할 수 있다.

 

 

부모 컴포넌트에서 함수를 설정한다.

setState는 리액트 분기중 화면에 값들이 렌더링 된후 setState를 이용해 state값을 변경하고 새롭게 렌더링할 때 사용한다.

setParentValue(v){
	this.setState({value : v})
}

 

이 함수를 자식 컴포넌트에 전달한다.

<Child
	setParentValue = {this.setParentValue}
/>

 

자식 컴포넌트에서는 전달한 함수를 특정 조건에서 사용하면 된다.

지금은 input에 새로운 값이 적용되엇을 때 그값을 부모로 전달하겠다.

<input
	type="text"
    onChange={() => {
    	this.props.setParentValue("test");
    }
/>

 

기본적인 경우이고 최근에 ES6로 버전이 올라가면서 자식에서 부모로 값을 전달하는 함수에 대해서는 부모 컴포넌트 생성자에서 다음과 같이 설정해줘야한다.