함수 컴포넌트에서 ⭐가변적인 상태⭐를 가지게 해준다.
const [state, setState] = useState(initialState);
useState
가 배열을 반환하고, 이를 구조 분해 문법으로 꺼내놓은 모습이다.
setState
를 이용해 state
값을 수정할 수 있다.
그리고 이때, state
가 객체 데이터 타입인 경우 불변성을 유지해줘야한다는 것 주의!
setState(() => {})
setState의 ()
안에 수정할 값이 아니라 함수를 넣을 수 있다.
그리고 그 함수의 인자에서는 현재의 state를 가져올 수 있고, {}
안에서는 이 값을 변경하는 코드를 작성할 수 있다.
// 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환
setState(number + 1);
setState((currentNumber) => { return currentNumber + 1 }); //함수형 업데이트
import { useState } from "react";
const App = () => {
const [number, setNumber] = useState(0);
return (
<div>
{/* 버튼을 누르면 1씩 플러스된다. */}
<div>{number}</div>
<button
onClick={() => {
setNumber(number + 1); // 첫번째 줄
setNumber(number + 1); // 두번쨰 줄
setNumber(number + 1); // 세번째 줄
}}
>
버튼
</button>
</div>
);
}
export default App;
일반 업데이트 : 버튼 누르면 1씩 플러스된다.
import { useState } from "react";
const App = () => {
const [number, setNumber] = useState(0);
return (
<div>
{/* 버튼을 누르면 3씩 플러스 된다. */}
<div>{number}</div>
<button
onClick={() => {
setNumber((previousState) => previousState + 1);
setNumber((previousState) => previousState + 1);
setNumber((previousState) => previousState + 1);
}}
>
버튼
</button>
</div>
);
}
export default App;
함수형 업데이트 : 버튼을 누르면 3씩 플러스 된다.
일반 업데이트 방식은 첫째~셋째 줄의 setNumber
가 각각 실행되는 것이 아니라, 배치
로 처리한다!
onClick했을 때 setNumber
라는 명령을 세 번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행시킨다.
반면, 함수형 업데이트 방식은 3번을 동시에 명령을 내리면 그 명령을 모아 순차적으로 각각 한번씩 실행시킨다.
리액트는 성능을 위해 setState()를 단일 업데이트(batch update)로 한꺼번에 처리할 수 있습니다.
불필요한 리렌더링을 방지(렌더링 최적화)하기 위해 즉, 리액트의 성능을 위해 한꺼번에 state를 업데이트 한다고 한다.
(렌더링이 잦으면 성능에 이슈. 불필요한 렌더링을 막기 위해)