11-3: 부모 컴포넌트의 state 조절하기

자식 컴포넌트에서 부모 컴포넌트의 state를 조절해야 할 때가 있다. 가령 부모 컴포넌트에서 props로 받은 값이 state이며, 해당 props 값이 상황에 따라 조절되어야 할 때 그렇다.

그럴 때는 어떻게 해야 할지 알 수 없었다. 그러다 예제 코드를 발견하게 되어 정리한다.

// 부모 컴포넌트
<ReceiptInputDialog
    show={open}
    onClose={() => this.setState({ open: false })}
/>

open이 상태값이다. 자식 컴포넌트는 해당 값이 true일 때만 가시화되며 false이면 비가시화된다. 그런데 자식 컴포넌트에 포함된 닫기 버튼이 눌려질 때 open: false가 되어야 한다.

// 자식 컴포넌트
export default function ReceiptInputDialog ({ show, onClose }) {
  // 중략
  return (
        <Dialog
            open={show}
        >
  		// 중략
                      <IconButton
                          onClick={onClose}
                      >

이렇게 부모 컴포넌트의 state를 바꾸는 함수를 자식 컴포넌트에 props로 넘겨준다. 그럼 자식 컴포넌트에서 실행된 함수가 부모 컴포넌트에 영향을 미칠 수 있다. 어째서 이런 일이 가능한지는 정확히 모르겠다. (이것과 비슷한 현상은 프로토타입 체이닝 밖에 모른다.)
props로 받은 함수는 부모 컴포넌트에 속해 있는 상태로 사용되는 걸까? 의외로 this 바인딩 쪽을 파면 해답이 나올지도 모르겠다.