state 역할: 함수형 컴포넌트에서 가변적인 상태를 가지게 하는 것
이 전부터 많이 실습해본 useState(); 에 대해 좀 더 알아보려고 한다.
이 전 사용법은
setCount(count+1);이런식으로 값을 넣어주었지만,
아래와 같이 함수를 넣어주는 것도 가능 하다는 것을 알게되었다.
setCount(()=>{ return; })
코드를 뜯어보자면
setCount ((현재값)=>{return 현재값+1})
// 현재값이라는 매개변수를 통하여 count의 값을 가져오고 그 값에 +1을 리턴시킨다.
이렇게 기본적인 함수형 업데이트 구현방법을 알아보았다.
🤨 이 두 가지 방식의 차이점?
만약, 버튼을 클릭했을 때 호출되는 함수에서
1번 방법을 사용했을 때 setCount를 3번 호출하게 된다면?
마지막 setCount의 값만 적용이 된다.
하지만 2번 방법을 사용했을 때 setCount를 3번 호출하게 된다면?
setCount가 3번 적용되어 6씩 +가 되는것을 확인할 수 있었다.
🧐 다르게 동작하는 이유?
리액트에서는 효율적인 처리를 위하여 배치 업데이트로 처리한다.
즉, 모아서 한꺼번에 처리한다는 것이다.
첫 번째 방법에서는
setCount가 호출되어도 즉시 상태가 업데이트되지 않는다
여러 번 호출할 때 이전 상태를 참조한다.
세번 호출한 count가 같은 값을 count를 참조하여 업데이트된다.
최종적으로 마지막 호출만이 상태를 설정하게 되어, 중간의 업데이트가 무시된다
하지만 두번째 방법을 사용한다면
각 호출이 함수형 업데이트를 사용하기 때문에,
각 함수는 현재 상태를 기반으로 새로운 값을 계산한다.
즉, 순차적으로 업데이트가 된다는 것이다.
정리
setCount는 비동기적으로 작동하므로,(배치 업데이트를 사용한다.)
그래서 여러번 호출되더라도 값은 마지막 한 번만 반영이되지만
함수형 업데이트를 사용하게되면 모든 useState값이 순차적으로 업데이트되기 때문에 전부 반영이 된다.
그리고 추가로 이전에는
부모에서 이렇게 선언하고
const [count,setCount] = useState(0);
자식에서 변경할 수 있게 하려면
count와 setCount를 둘 다 내려줘야 했지만
함수형 컴포넌트를 이용하면
<button onClick={()=>{ setCount((prev)=>prev+1) }}></button>
형태로 사용할 수 있어서 setCount 만 내려줘도 된다!!
끝!
useState에 대해 어느정도 익숙해진 것 같다.
공식문서를 찾아보며 개념을 좀 더 정리하고
실습을 좀 더 해봐야할 것 같다.
