210324 개발일지(107일차) - React 하위(자식) Component에서 상위(부모) Component State 바꾸기

상위(부모) Component에서 하위(자식) Component로 state 전달해서 사용하는(읽는) 것은 쉽다.
자식 컴포넌트를 불러올 때, 넘겨주고 싶은 값을 넘겨주면 된다. 예를 들면,

// 부모 컴포넌트
...
state = {
    name : gojae
}
render() {
  return(
    <Child name={this.state.name} />

와 같이 작성해서 Child라는 자식 컴포넌트에 'name'이라는 이름으로 넘겨주면 자식에서는

this.props.name

 의 형태로 가져다 쓰면 된다.

그러나 하위(자식)에서 상위(부모)의 props를 직접 바꾸는 것은 불가능하다.
그래서 그 과정이 귀찮은데, 이제 하위(자식) 컴포넌트에서 상위(부모) 컴포넌트의 state를 어떻게 바꾸는 지 알아보자.
순서는 아래와 같다

1. 부모(상위) 컴포넌트에서 부모(상위) 자신의 state값을 변경해주는 함수(f) 만들기
2. 그 함수(f)를 하위(자식) 컴포넌트에게 넘겨주기
3. 하위(자식) 컴포넌트에서 받은 함수(f)를 실행시킬 수 있는 함수(g)를 만들기
4. 하위(자식) 컴포넌트에서 함수(g)를 실행

위의 4단계를 거치면, 하위(자식)에서 상위(부모)의 state를 변경할 수 있다.

1. 부모(상위) 컴포넌트에서 부모(상위) 자신의 state값을 변경해주는 함수(f) 만들기

여기서 함수(f)는 pagePresetChange()가 되겠다.

// 상위(부모) 컴포넌트
...
state = { pagePreset : 0 }
pagePresetChange = () => {
    this.setState({pagePreset : 1 })
}
...

2. 그 함수(f)를 하위(자식) 컴포넌트에게 넘겨주기

// 상위(부모) 컴포넌트
...
render() {
    return <Child pagePreset={this.pagePresetChange} />
}  

3. 하위(자식) 컴포넌트에서 받은 함수(f)를 실행시킬 수 있는 함수(g)를 만들기

여기서 함수(g)는 presetSend()이다.

// 하위(자식) 컴포넌트
...
presetSend = () => {
    this.props.pagePreset();    
}
...

4. 하위(자식) 컴포넌트에서 함수(g)를 실행

// 하위(자식) 컴포넌트
...
<button onClick={this.presetSend}>부모 state 바꾸기</button>
...