state : 변경될 수 있는 데이터를 처리할 때 효율적으로 사용

1. State를 올바르게 사용하기

setState()에 대해서 알아야 할 세 가지가 있습니다.

⚠️ React setState() 동작 내부 처리 방식

React 내부적으로 setState를 비동기로 처리한다.

하나의 어플리케이션, 하나의 페이지나 컴포넌트에도 수많은 상태값이 있을텐데, 상태가 각각 바뀔 때마다 화면을 리랜더링 해야한다면 문제가 생길 것이다.

*그래서 리액트는 이런 문제를 효율적으로 해결하기 위해 setState를 연속 호출하면 setState를 모두 **취합(batch)*한 후에 한 번에 렌더링하도록 한다. 그러면 100번의 상태값 변화를 한 번의 렌더링으로 최신의 상태를 갱신할 수 있다.

export default class App extends Component {
  state = { count: 0 };

	*// 1. 객체 state의 값 전달*
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
    console.log("call-1: " + this.state.count); // 1
    this.setState({ count: this.state.count + 1 });
    console.log("call-2: " + this.state.count); // 1
    this.setState({ count: this.state.count + 1 });
    console.log("call-3: " + this.state.count); // 1
  };
  *// setState()는 비동기적으로 동작하기 때문에 참조값 this.state.count는
  // 이전 값으로 반환된다.
	// state에 업데이트된 count는 1 만큼씩 만 증가한다.*

	*// 2. 함수 인자의 값 전달*
  handleClick = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
    console.log(this.state.count); // 1
    this.setState((prevState) => ({ count: prevState.count + 1 }));
    console.log(this.state.count); // 2
    this.setState((prevState) => ({ count: prevState.count + 1 }));
    console.log(this.state.count); // 3
  };
  *// setState()는 비동기적으로 동작하기 때문에 참조값 this.state.count는*
	*// 이전 값으로 반환된다.*
	*// 하지만 prevState 매게변수로 변경된 state.count 의 값을 불러와 사용할 수 있다.*
	*// (this.state.count 가 변경된 게 아니라 prevState가 변경된 값이다.)*
	*// state에 업데이트된 count는 3 만큼씩 증가한다.*

  render() {
    console.log("render!");
    return (
      <>
        <div>현재값 {this.state.count}</div>
        <button onClick={this.handleClick}>count+</button>
      </>
    );
  }
}

// -------------------------
// (추가)
// setState 함수가 호출되고 난 후 동작을 정의하기
handleClick = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }),
									() => {
										console.log('방금 setState가 호출되었습니다.');
									});
};

2. 데이터는 아래로 흐릅니다.

부모 Component나 자식 Component 모두 특정 Component가 유상태인지 또는 무상태인지 알 수 없고, 그들이 함수나 클래스로 정의되었는지에 대해서 관심을 가질 필요가 없습니다.

이 때문에 state는 종종 로컬 또는 캡슐화라고 불립니다. state가 소유하고 설정한 Component 이외에는 어떠한 Component에도 접근할 수 없습니다.

Component는 자신의 state를 자식 Component에 props로 전달할 수 있습니다.

<FormattedDate date={this.state.date} />

FormattedDate Component는 date를 자신의 props로 받을 것이고 이것이 어떤 Component의 state로부터 왔는지 수동으로 입력한 것인지 알지 못합니다.