5.1 State 올바르게 사용하기

직접 State를 수정하지 않기

setState를 쓰지 않고 직접 State를 수정한다면?

React가 state가 변경된 걸 인지하지 않는다. 그러면 render()를 호출하지 않을거고, 아무런 변화가 없음.ㅜㅜ

직접 state를 지정할 수 있는 건 constructor에서 this.state로 초기 값을 줄 때 뿐...

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

React는 성능을 위해 여러 setState() 호출을 단일 업데이트로 한꺼번에 처리하기도 한다.

this.props와 this.state가 비동기적으로 업데이트 될 수 있기 때문에 state 계산 시 값에 주의해야 한다.

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

해당 경우 state가 실시간 업데이트 안 됐는데 계산이 될 수 있다.

이를 잘 사용하기 위해 함수를 인자로 쓰는 setState()를 만든다. 이렇게 하면 이전 state를 첫 번째 인자로 받고, 업데이트 된 시점에 props를 두 번째 인자로 받아들인다.

//이렇게 씁니다 this.setState((state, props) =>({ counter: state.counter + props.increment }));

또 다른 예시를 살펴보자.

incrementCount() { this.setState((state) => { // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다. return {count: state.count + 1} }); } handleSomething() { // `this.state.count`가 0에서 시작한다고 해봅시다. this.incrementCount(); this.incrementCount(); this.incrementCount(); // 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다. // 하지만 React가 컴포넌트를 리렌더링하게 되면 이 값은 3이 됩니다. }

this.state.count가 0으로 초기 값을 설정했다고 했을 때

this.incrementCount();를 세 번 해서 +1 +1 +1이 되었다.

하지만 위 코드처럼 this.state.count 값을 읽어와도 여전히 값이 0일 것이다. 랜더링 한번에 처리하기 때문에(비동기적으로 작동하기 때문에) 의도한대로 계산이 안될 수 있다.

React가 컴포넌트를 리렌더링하게 되면 그 때야 값이 3이 된다...

State 업데이트는 병합된다

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

예를 들어 state가 다음처럼 여러 변수(posts, comments)를 갖고 있다고 했을 때

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

개별적으로 값을 업데이트 할 수 있습니다

componentDidMount(){ fetchPosts().then(response =>{ this.setState({ posts: response.posts //this.state.comments에는 영향 없음 }); }); fetchComments().then(response => { this.setState({ comments: response.comments )}; }); }

참고

State and Lifecycle - React

이 페이지는 React 컴포넌트 안의 state와 생명주기에 대한 개념을 소개해 줍니다. 자세한 컴포넌트 API 레퍼런스는 여기 에서 찾을 수 있습니다. 이전 섹션에서 다뤄본 째깍거리는 시계 예시를 다시 살펴보겠습니다. 엘리먼트 렌더링에서는 UI를 업데이트하는 한 가지 방법만 배웠으며, 렌더링 된 출력값을 변경하기 위해 ReactDOM.render() 를 호출했습니다. 이 섹션에서는 Clock 컴포넌트를 완전히 재사용하고 캡슐화하는 방법을 배울 것입니다.

https://ko.reactjs.org/docs/state-and-lifecycle.html

컴포넌트 State - React

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링됩니다. ("properties"의 줄임말) 와 는 일반 JavaScript 객체입니다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props는 (함수 매개변수처럼) 컴포넌트 에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

https://ko.reactjs.org/docs/faq-state.html

React.setState를 사용하지 않는 3가지 이유

번역] 3 Reasons why I stopped using React | * 이 글은 Michel Weststrate 의 3 Reasons why I stopped using React.setState 를 번역한 글입니다. ** 오역 및 오탈자가 있을 수 있습니다. 발견하시면 제보해주세요! 저와 비슷한 고민을 하는 개발자 분들이 있을 수도 있다는 생각이 들어 오랜만에 번역을 해보았습니다.

https://brunch.co.kr/@hee072794/108

Uploaded by Notion2Tistory v1.1.0