[React] State

Nine·2022년 5월 8일

목록 보기

3/22

setState

React에서 상태를 변경하는 방법입니다.

코드를 보실까요?

// Case 1
this.setState({ name: 'newName' });

// Case 2
this.setState(function(state, props) {
  return {
    name: 'newName'
  };
});

// Case 3
this.setState((state, props) => ({
  name: 'newName'
}));

위처럼 상태를 변경하는 방법은 다양해요.
setState는 해당 컴포넌트의 리렌더링을 발생시켜요.

👉 즉, 상태를 변경시키면 컴포넌트의 리렌더링이 발생합니다.

1) 직접 변경하지 않고 굳이 setState를 사용하는 이유가 무엇일까요?

그냥 변경하면 React는 변경을 감지하지 못해요.
setState를 통해서 상태를 변경 👉 변경을 감지 👉 리렌더링 발생

2) setState는 비동기적으로 작동할까요?

state 변경 함수들은 전부 asynchronous (비동기적)으로 처리됩니다.
functional Component에서는 useEffect를 이용해 문제를 해결할 수 있어요. 👇

// count 상태가 변할 때 ~~를 해주세요!
useEffect(()=>{
	// ~~
 }, [count])

🤔 왜 굳이 비동기로 했을까요?

수많은 상태값이 있을텐데, 상태가 각각 바뀔 때마다 화면을 리랜더링 해야한다면 피곤하겠죠ㅠㅠ
이런 문제를 해결하기 위해 setState를 연속 호출하면 모두 취합(batch)한 후에 한 번에 렌더링하도록 하고 있어요.
정확히는 16ms 단위로 취합해서 batch update를 진행한다고 해요.

💢 그래도 setState 연속 호출을 모두 적용시키고 싶다면? (동기적으로 사용하고 싶다면)

setState((prevState) => prevState + 1);

👆 이렇게 함수를 넘겨주어 큐에 저장될 수 있도록 합시다.

🤔 우테코 크루들과 state값 변경하는 방법에 대해서 논의해봤습니다. 어떤 것이 좋을지 생각했는데 위처럼 화살표 함수로 변경하는 것이 제일 좋다는 의견이 대다수였습니다.

1) batch처리를 피해 의도한대로 상태 변경을 일으킬 수 있어요.

2) useCallback, useMemo를 사용할 때 의존성을 분리할 수 있어요. (⚠️아직 확실하지 않습니다.. 더 알아볼 것!)