TIL 39 day react 자식에서 부모로 state 넘기기

react에서는 부모에서 자식으로 부모의 상태값을 넘길 수도 있고 자식에서 부모로 자식의 상태값을 넘길 수도 있다.
이번 프로젝트에서 이 부분을 거의 쓸 곳이 없었는데다가 그나마 써볼 수 있는 부분도 자식에서 부모로 state 넘기는 걸 실패하는 바람에 사실상 이번 프로젝트에서 전혀 익히지 못한 부분이었다.
그렇기에 복습겸 예습겸 다시 어떤식으로 작성 해야할지 적어두기로 했다.

++ 약간 딴 소리지만 react 공식 홈페이지에도 주요개념에 설명되어 있지만 처음에 보지 말 것을 추천한다. state 끌어올리기(Lifting State Up)라고 되어 있는데 예시가 섭씨와 화씨를 변경하는 건데 진짜 예시 누가 만들었는지 욕 좀 먹어야 한다고 생각한다. 예시란 자고로 쉽게 알아보는게 목적인데 섭씨와 화씨 나오는 순간 읽을 의욕이 사라지기 때문에 그냥 다른 블로그글을 보는 걸 추천한다.

보이는 화면

첫 화면

빈 input 창에 이름을 넣어서 표시되도록 만들었다.

작동한 화면

부모 컴포넌트 (Main)

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }

  bringName = (name) => {
    this.setState({ name: name });
  };

  render() {
    return (
      <div className="Main">
        <AddInfos name={this.state.name} event={this.bringName} />
        <p>제 이름은 {this.state.name}입니다.</p>
      </div>
    );
  }
}

export default Main;

자식 컴포넌트 (AddInfos)

export class AddInfos extends Component {
  constructor() {
    super();
    this.state = {
      name: "",
    };
  }

  sendName = (event) => {
    this.props.event(this.state.name);
    this.setState({ name: "" });
    event.preventDefault();
  };

  handleInput = (event) => {
    this.setState({
      name: event.target.value,
    });
  };

  render() {
    return (
      <div className="AddInfos">
        <form onSubmit={this.sendName}>
          <label htmlFor="name">
            이름
            <input
              type="text"
              value={this.state.name}
              onChange={this.handleInput}
            />
          </label>
          <button type="button">제출</button>
        </form>
      </div>
    );
  }
}

export default AddInfos;

1. 부모 컴포넌트에서 자식 컴포넌트의 값을 받을 함수를 작성한다.
   => Main 컴포넌트의 bringName 함수가 자식 컴포넌트(AddInfos)에서 값을 받을 함수이다.
2. 부모 컴포넌트에 사용된 자식 컴포넌트의 속성값으로 해당 함수를 자식 컴포넌트로 넘겨준다.
   => <AddInfos name={this.state.name} event={this.bringName} />
3. 자식 컴포넌트의 input창에서 값을 받으면 자식 컴포넌트의 state에서 input의 value 값을 저장한다.
   =>

    this.setState({
      name: event.target.value,
    });
  };

4. 버튼을 클릭했을 때 자식 컴포넌트의 state의 값(name)을 props로 받은 부모 함수bringName의 인자로 넘겨준다.

  sendName = (event) => {
    this.props.event(this.state.name); 
    // props로 받은 함수의 인자로 state의 값을 넘겨준다
    this.setState({ name: "" });
    // input창 clear를 위한 상태 변화
    event.preventDefault();
    // form 태그에 내장되어 있는 submit 후 page reload 기능 막기
  };

💥 form 태그의 내장 기능으로 form 내부에 있는 input과 button은 따로 이벤트 설정을 하지 않아도 enter혹은 click을 했을 때 submit이 된다.