TIL 2021.01.19

setState

비동기 동작

  const Increase = () => {
      console.log(count); //1
      setState(count+1)
      console.log(count)  //1 (not 2)
  };

• 위 코드에서 마지막 로그가 2가 아닌 이유는 setState함수가 비동기로 작동하기 때문이다.
• 즉, setState()가 완료되길 기다리지 않고 바로 두번째 console.log가 실행되기 때문에 업데이트된 값을 출력하지 않는다.
  
  

객체 병합 처리

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

• setState에 state객체를 전달하여 호출하는 경우, 한번에 여러개의 setState 를 호출하면 React는 이것을 하나로 합쳐서 처리한다.

• 이는 JavaScript에서 객체를 "병합"하거나 구성하는 방식과 관련있다. 다음 예시Object.assign와 같이 전달 된 객체 중 동일한 키의 객체에 대해선 마지막 객체의 값이 우선한다.

    me = {name : "Justice"};    
    you = {name : "Your name"};    
    we  = Object.assign({}, me, you);

    console.log(we); // {name : "Your name"}

• state에 대해서도 한번에 여러 번의 setState호출시 가장 마지막의 변경 내용을 적용한다. 아래 코드에서 count는 3으로 바뀐다.

const onClick = () => {
    setCount(count + 1);
    setCount(count + 2);
    setCount(count + 3);
    // count : 3
}

함수형 setState

• setState()의 인자로 함수를 전달하는것을 말한다.

• 원래 setState로 상태를 변화하면 컴포넌트가 리렌더링이 되는데, 여기에 callback함수까지 작성해주면 callback 함수가 실행 된 후 리렌더링이 된다.

• 이 경우 리액트는 setState()의 변경 내용을 합치는 것이 아니라, 하나의 큐(queue)에 setState()를 올리고 이것들이 호출된 순서에 따라 state를 변경한다.

• 따라서 다음 setState는 이전 state의 값을 반영한다.

• 클래스형 컴포넌트에서의 함수형 setState

   setState(updater, [callback]) 
   setCount(count, () => count + 1);

• useState의 setState함수는 두번째 인자 콜백함수를 받지 않는다.

   setCount(count + 1)
   // 현재 상태를 참조하지 않고 상태를 변경하는 방법
   setCount((count) => count + 1); 
   setCount((count) => count + 2);
   setCount((count) => count + 3);
   // count : 7

(default) 상태변화에 따른 컴포넌트 re-rendering

• setState에 따라 상태가 변화되면 shouldComponentUpdate가 트리거됨.
• shouldComponentUpdate의 반환값이 true(default)인 경우 render 호출되어 컴포넌트가 re-render됨

• 참고:
  https://www.freecodecamp.org/news/functional-setstate-is-the-future-of-react-374f30401b6b/