😏 state란 무엇인가?
- SPA를 사용하고 싶다면 state를 사용하여 state 변경이 일어날시에 DOM을 재렌더링해준다
- state는 리액트에서 일반변수와 다르게 상태(값)이 변하면 연관있는 컴포넌트들이 재렌더링을 일으킨다
- 컴포넌트 내 변경 가능한 데이터 저장소이며 UI에 반영하기 위해 유지해야할 값 묶음이다.
=> state는 props와 같이 렌더링에 영향을 주는 데이터를 가진 객체이고, 컴포넌트 안에서 관리된다
😏 setState란 무엇인가?
- setState를 변경할 때 사용하는 함수
- state를 직접 변경하게 되면 배열과 객체의 경우 같은 주소값을 참조하기에 재렌더링이 일어나지 않는다
- 비동기적으로 동작한다
const Test = () => {
const [count, setCount] = useState(1)
useEffect(() => {
setCount(count + 1);
setCount((count) => count + 1)
setCount(count + 1);
setCount((count) => count + 1)
setCount(count + 1);
setCount((count) => count + 1)
}, [])
//결과 : 3
const [count1, setCount1] = useState(1);
useEffect(()=>{
setCount1(count1 + 1);
setCount1(count1 + 1);
setCount1(count1 + 1);
},[])
//결과 : 1
const [count2, setCount2] = useState(1);
useEffect(()=>{
setCount2(prev=> prev + 1);
setCount2(prev=> prev + 1);
setCount2(prev=> prev + 1);
}, [])
//결과: 3
return (
<div className='headerStyle'>
count: {count}
<br/>
count1: {count1}
<br/>
count2: {count2}
</div>
)
}- React는 setState를 킵해두고 다른 코드들을 처리후 브라우저 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다
- callback함수를 쓰지 않는다면
(setCount2(prev=> prev + 1))===updater함수많은 리렌더링을 줄이고자 배치(Batch) 기능을 사용하여 마지막 한번만 적용된다 - updater함수를 쓰면 동기적인 처리가 가능하다
😏 useState를 왜 쓰는가?
- state의 저장방식이
객체이기에 같은 참조값을 바라보면 React에서는 변화에 대한 감지를 할 수 없다 - 그렇기에 useState의 setState를 사용하여 직접 변경하지 않고 새로운 객체를 만들어(깊은 복사) 변경하여 비교&감지한다. 그 후 재랜더링이 일어난다
출처 :https://velog.io/@devmag/React-state-%EB%B3%80%EA%B2%BD-%EC%8B%9C-%EC%99%9C-useState-setState%EB%A5%BC-%EC%93%B0%EB%8A%94%EA%B0%80
https://rinrin-dev.tistory.com/93
https://velog.io/@win/useEffect%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC2
https://velog.io/@wjdcksdud29/React-setState-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-TIL-53
winwin