[React] 자식 컴포넌트에서 부모 컴포넌트 state 바꾸기

React 에서 props 는 읽기 전용의 값이다
그래서 부모 컴포넌트의 state 값을 자식 컴포넌트에 props 값으로 내려주게 되면 자식 컴포넌트에서는 props 값을 변경 할 수 없다

그렇지만 자식 컴포넌트에서 값을 변경 해야 하는 일이 생기는데 이때 사용하는 방법이 함수를 사용하는 방법 이다.

ex) value2 값을 value1 로 바꾸고 싶을 때

부모 컴포넌트

this.state = {
  key1 : value2 
}
<childComponent key1={this.state.key1} />

state에 key1 이라는 키에 value2 라는 값이 들어 있고, 이 값을 자식 컴포넌트에 props로 전달하고 있다

---

자식 컴포넌트

<div>{this.props.key1}</div>

전달 받은 props 값을 띄워주고 있다

버튼을 눌러서 state 값을 바꾸는 코드로 변경하면,

부모 컴포넌트

this.state = {
  key1 : value2 
}

changeState = () => {
  this.setState({key1: value1})
}

<childComponent key1={this.state.key1} changeState={this.changeState} />

부모 컴포넌트에 스테이트 값을 변경하는 함수를 작성하고, 그 함수를 자식 컴포넌트에 props 로 전달한다

---

자식 컴포넌트

<div>{this.props.key1}</div>
<button onClick={this.props.changeState} />

props로 전달받은 함수를 버튼을 눌러서 실행 하도록 이벤트를 설정한다.

이렇게 하면 자식 컴포넌트에서 부모 컴포넌트에 있는 state 값을 변경 할 수 있다.