리액트 공식문서 읽기 - 주요개념(State)

State

`state`: 리액트 컴포넌트에서 동적으로 변화하는 값을 관리하기 위해 사용되는 객체

State를 올바르게 사용하기

`setState()`: 컴포넌트의 state 객체에 대한 업데이트를 실행하는 함수. state가 변경되면 컴포넌트는 리렌더링 된다.

 

setState()에 대해 알아야 할 것

1. 직접 State 수정 금지

//❌
this.state.comment = 'Hello';

//⭕
this.setState({comment: 'Hello'});

• `setState()`를 이용해 state 값을 변경해야 한다.
• `this.state`는 constructor에서만 지정할 수 있다. 

2. State 업데이트는 비동기적일 수 있다.

React는 성능을 위해 `setState()` 호출을 단일 업데이트로 한꺼번에 처리할 수 있다. 

이에 따라 `this.props`와 `this.state`가 비동기적으로 업데이트될 수 있으므로 다음 state 계산 시 해당 값에 의존해서는 안된다.

//❌
this.setState({
  counter: this.state.counter + this.props.increment,
});

//⭕
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

첫 번째 코드는 카운터 업데이트에 실패할 수도 있는 코드이다.

이 코드를 수정하기 위해서는 두 번째 코드처럼 함수를 인자로 사용하는 다른 형태의 `setState()`를 사용한다.

해당 함수는 이전 state를 첫 번째 인자로 받고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받는다.

 

3. State 업데이트는 병합된다.

`setState()`를 호출할 때 React는 제공한 객체를 현재 state로 병합한다.

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

state는 위와 같이 다양한 독립적이 변수를 포함할 수 있다. (posts, comments,...)

이러한 변수는 `setState()` 호출을 통해 독립적으로 업데이트할 수 있다. 

 componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

병합은 얕게 이루어지므로, `this.setState({comments})`는 `this.state.posts`에 영향을 주지 않는다.

대신 `this.state.comments`는 새로 설정한 값으로 완전히 대체된다. 

 

 

데이터는 아래로 흐른다.

state를 이용해 컴포넌트를 관리하면 state가 소유/설정한 컴포넌트 이외에는 어떠한 컴포넌트에도 접근할 수 없다.

따라서 state는 로컬 또는 캡슐화라 불리기도 한다. 

부모/자식 컴포넌트 역시 마찬가지로, 자식/부모 컴포넌트에 접근이 불가하다.

대신 부모 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.

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

function FormattedDate(props) {
  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
}

FormattedDate 컴포넌트는 date를 props로 받지만 해당 date의 값 이외에 어떤 정보도 알 수 없다.

 

👉 일반적으로 이를 "하향식" 또는 "단방향식" 데이터 흐름이라고 한다. 모든 state는 항상 특정 컴포넌트 소유이고 그 state로부터 파생된 UI 및 데이터는 오직 트리구조에서 그 자신의 아래에 있는 컴포넌트에만 영향을 미친다.