해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.

---

Child Components → Parents' State

💡 목적 : 부모로부터 받은 setState 메소드를 이용하여 부모 컴포넌트의 State를 자식 컴포넌트가 변경시키도록 만들기

구현 방법

1. Parent Component에서 this.setState를 실행시키는 메소드를 정의한다
   : handleClick() 메소드 안에 setState를 호출하여 state를 변경시키고 있음

class ParentClass extends React.Component {
  constructor(props) {
    super(props);

    this.state = { totalClicks: 0 };
  }

  handleClick() {
    const total = this.state.totalClicks;
    this.setState(
      { totalClicks: total + 1 }
    );
  }
}

2. 새 메소드는 constructor 에서 bind를 해주어야 한다
   : 그래야지 이 메소드를 Child Component에게 넘겨주어도 Parent Component의 state를 변경하도록 할 수 있음

class ParentClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { totalClicks: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

3. 메소드 정의와, binding이 완료되었으면 Child Component에게 해당 메소드를 props로써 넘겨준다

  render() {
    return (
      <ChildClass onClick={this.handleClick} />
    );
  }

4. Child Component는 이렇게 넘겨받은 메소드를 사용한다

export class ChildClass extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        Click Me!
      </button>
    );
  }
}

---

Child Components → Sibling Components

💡 목적 : 부모 컴포넌트로부터 받은 setState 메소드를 이용해 자식 컴포넌트가 부모 컴포넌트의 state를 변경한 후, 부모 컴포넌트가 이를 다른 자식 컴포넌트(형제)에게 주는 것.

구현 방법

1. Parent Component에서 setState 메소드를 실행할 Child Component에는 this.changeName 메소드를, setState에 의해 변화된 값이 들어갈 Sibling Component에는 this.state.name을 준다.

  render() {
    return (
      <div>
        <Child onChange={this.changeName} />
        <Sibling name={this.state.name} />
      </div>
    );
  }

2. Child Component에는 this.props.onChange 함수를 실행하는 handleChange 메소드를 만들어 이벤트 리스너에 달아준다.

export class Child extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const name = e.target.value;
    this.props.onChange(name);
  }

  render() {
    return (
      <div>
        <select
          id="great-names"
          onChange={this.handleChange}>

          <option value="Frarthur">Frarthur</option>
          <option value="Gromulus">Gromulus</option>
          <option value="Thinkpiece">Thinkpiece</option>
        </select>
      </div>
    );
  }
}

3. Sibling Component에는 Child Component에서 변경한 값이 반영될 jsx가 있음 → {this.props.name}을 넣어 렌더링

export class Sibling extends React.Component {
  render() {
    const name = this.props.name;
    return (
      <div>
        <h1>Hey, my name is {name}!</h1>
        <h2>Don't you think {name} is the prettiest name ever?</h2>
        <h2>Sure am glad that my parents picked {name}!</h2>
      </div>
    );
  }
}