TIL 2021.01.19
const Increase = () => {
console.log(count); //1
setState(count+1)
console.log(count) //1 (not 2)
};
setState
함수가 비동기로 작동하기 때문이다. setState()
가 완료되길 기다리지 않고 바로 두번째 console.log
가 실행되기 때문에 업데이트된 값을 출력하지 않는다.React는 성능을 위해
setState()
호출을 단일 업데이트로 한꺼번에 처리할 수 있습니다.
setState
를 호출하면 React는 이것을 하나로 합쳐서 처리한다.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
로 상태를 변화하면 컴포넌트가 리렌더링이 되는데, 여기에 callback함수까지 작성해주면 callback 함수가 실행 된 후 리렌더링이 된다.
이 경우 리액트는 setState()
의 변경 내용을 합치는 것이 아니라, 하나의 큐(queue)에 setState()
를 올리고 이것들이 호출된 순서에 따라 state를 변경한다.
따라서 다음 setState는 이전 state의 값을 반영한다.
클래스형 컴포넌트에서의 함수형 setState
setState(updater, [callback])
setCount(count, () => count + 1);
setCount(count + 1)
// 현재 상태를 참조하지 않고 상태를 변경하는 방법
setCount((count) => count + 1);
setCount((count) => count + 2);
setCount((count) => count + 3);
// count : 7
setState
에 따라 상태가 변화되면 shouldComponentUpdate
가 트리거됨. shouldComponentUpdate
의 반환값이 true
(default)인 경우 render
호출되어 컴포넌트가 re-render됨