[React] State를 올바르게 사용하는 방법

◽ State를 올바르게 사용하기

1. setState()를 활용한다.

컴포넌트를 다시 렌더링하도록 setState()를 사용한다.

contructor에서 this.state를 지정할 수 있다.

// wrong
// 직접적으로 state를 수정하는 이 코드는 컴포넌트를 다시 렌더링하지 않는다.
this.state.comment = 'Hello'

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

 

2. state 업데이트는 비동기적으로 처리될 수도 있다.

this.props와 this.state가 비동기적으로 업데이트 될 수도 있기 때문에 해당 값에 의존해서는 안된다.

이를 수정하기 위해서는 객체보다는 함수를 인자로 사용하는 다른 형태의 setState()를 사용한다.그 함수는 이전 state를 첫번째 인자로, 그리고 업데이트가 적용된 시점의 props를 두번째 인자로 쓴다.

// Wrong
// state와 props가 업데이트가 된 값이라고 확신할 수 없다.
this.setState({
  counter: this.state.counter + this.props.increment,
});


// Correct (화살표 함수)
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct (일반 함수)
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

 

3. States는 독립적인 변수를 포함할 수 있다.

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }
  
   // 별도로 호출하여 각각 업데이트 할 수 있다.
   componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

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

 

 

 

출처

State and Lifecycle – React