함수형 업데이트
state의 값을 업데이트하기 위해 setState에 직접 수정할 값을 전달해줄 수도 있지만, 함수의 반환값을 이용할 수도 있다!
const [count, setCount] = useState(0);
const handleCountPlus = () => {
setCount((현재값) => {
return 현재값 + 1;
});
};
값을 대입하는 방식과의 차이
const [count, setCount] = useState(0);
<button onClick={() => {
// 값을 대입하는 경우
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// 함수를 사용하는 경우
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
}}></button>
1) 바로 값을 대입하는 경우
- 버튼을 한번 클릭할 때 1이 증가한다
- React의 동작으로 set을 한번에 모아 처리하는데(batch), 동일한 동작이 여러번 있으므로 하나로 처리한다
2) 함수를 사용하는 경우
- 버튼을 한번 클릭할 때 3이 증가한다
- 함수형의 경우 한번에 모아 순차적으로 처리한다
- 따라서 순차적인 처리가 필요하면 함수형 업데이트를 사용해야 함
자식 컴포넌트에서 부모 컴포넌트의 state를 수정하기
const Parent = () => {
const [count, setCount] = useState(0);
return (
<>
<p>현재 카운트: {count}</p>
<Child count={count} setCount={setCount}/>
</>
);
};
// 값을 대입하는 방식
const Child = ({count, setCount}) => {
return (
<button onClick={() => {
setCount(count + 1);
}}>증가</button>
);
};
// 함수형 업데이트 방식
const Child = ({setCount}) => {
return (
<button onClick={() => {
setCount((prev) => prev + 1);
}}>증가</button>
);
};
값을 대입하는 방식의 경우 기존 값이 필요해 count도 함께 넘겨줘야하지만, 함수형 업데이트 방식을 사용하면 setCount만 넘겨줘도 원하는 방식이 가능하다!
'React' 카테고리의 다른 글
[React] useContext (0) | 2024.08.16 |
---|---|
[React] useRef (0) | 2024.08.16 |
[React] styled-component (0) | 2024.08.16 |
[React] 리액트의 개념과 성능 최적화 팁 (0) | 2024.08.14 |
[React] Rendering과 Virtual DOM (0) | 2024.08.08 |