setState()란?
setState()는 컴포넌트의 state 객체를 업데이트 시킬 때 사용합니다. state가 변경되면 컴포넌트는 리렌더링 됩니다.
State 올바르게 사용하기
직접 State를 수정하면 안됩니다.
state 객체를 직접 수정하게되면 컴포넌트가 변경된 것을 알지 못하기 때문에 변경된 부분이 있더라도 다시 리렌더링하지 않습니다.
State는 비동기적으로 처리됩니다.
React는 성능을 위해서 setState() 호출을 단일 업데이트로 한꺼번에 처리합니다. 비동기적으로 업데이트 될 수 있기 때문에 다음 state를 사용할 때 해당 값에 의존해서는 안됩니다.
setState()를 동기적으로 처리하기 위해서 setState() 함수에 인자로 객체를 주는 것 대신 함수형으로 실행할 경우 동기적으로 처리할 수 있습니다.
setState({count: this.state.count+1});
setState({count: this.state.count+1});
setState({count: this.state.count+1});
// 위 동작의 기대값은 3이지만 실제로는 1이 결과로 나옵니다.
setState((state, props) => ({count: state.count+1}));
setState((state, props) => ({count: state.count+1}));
setState((state, props) => ({count: state.count+1}));
// 위 동작은 실행 큐에 적재되어 차례차례 실행되어 3이라는 결과가 나옵니다.State 업데이트는 병합됩니다.
setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합합니다. 즉, state의 변수가 여러개라면 따로 업데이트가 가능합니다.
// state의 변수가 posts와 comments로 여러개 입니다.
constructor(props) {
super(props);
this.state = {
posts: [],
comments: []
};
}
componentDidMount() {
fetchPosts().then(response => {
// 별도 setState() 호출로 독립적으로 업데이트 할 수 있습니다.
this.setState({
posts: response.posts
});
});
fetchComments().then(response => {
// 별도 setState() 호출로 독립적으로 업데이트 할 수 있습니다.
this.setState({
comments: response.comments
});
});
}결론
state를 직접 수정하게 될 경우React는 컴포넌트가 변경된 것을 알지 못하기 때문에 변경된 부분이 있더라도 다시 리렌더링하지 않습니다.
때문에setState()함수를 이용해서state를 업데이트 해야하지만,setState()함수는 비동기적으로 업데이트 되기 때문에 동기적으로 업데이트 될 수 있도록setState()함수에 인자로 객체를 주는 것 대신 함수형으로 실행하거나 외부 라이브러리(Redux,MobX등)를 사용해서 상태를 업데이트 하는 것이 좀 더 안정적으로 상태를 업데이트 할 수 있습니다.
