useState
A라는 회사의 면접을 보았다. 물론 탈락
leetcode, 백준, 프로그래머스와 같은 알고리즘 테스트로 개발자를 평가하는 것이 아닌
실제 언어와 라이브러리를 얼마나 잘 이해하고 사용하는지를 테스트하는 서비스를 만드는 회사였다.
나 또한 그 회사에서 만든 테스트를 풀고 면접을 진행하게 되었다.
그 중 CTO분께서 해주신 피드백을 다시 한번 공부하게 되었다.
👨💻: 혹시 setState(state + 1)과 setState(prev => prev + 1)의 차이점을 아시나요 ?
😅: 이전 state 값을 다시 사용하기 위해 prev를 사용하는 걸로 알고 있습니다만 자세한 동작은 잘 모르겠습니다...
정말 창피했다.
이제 껏 React Hooks의 기초인 useState의 기초적인 사용방법을 겉핥기 식으로 알았다는 나 자신이 부끄러웠다.
이후 집에서 유튜브와 구글링을 통해 해당 useState의 기본 동작 원리와 위에 두 setState의 차이점을 공부했다.
setState
먼저 setState는 state의 값을 변경하기 위해 사용된다.
setState 함수 안에 특정 값 혹은 함수를 인자로 넣어주게 되면 state의 값이 바뀌게 되는데
그럼 setState(state + 1)과 setState(prev => prev + 1)은 무엇이 다른 걸까 ?
먼저 코드로 살펴보자.
function App() {
const [state, setState] = useState(0);
return (
<button
onClick={() => {
// State에 1을 더해라 !
setState(state + 1);
// 위에 놈 말 듣지말고 State에 1을 더해라 !
setState(state + 1);
// 위에 놈 말 듣지말고 State에 1을 더해라 !
setState(state + 1);
// 위에 놈 말 듣지말고 State에 1을 더해라 !
setState(state + 1);
// 마지막 녀석의 말을 들어야지 ...
console.log(state); // 1
}}
>
Click
</button>
);
}간단하게 버튼을 클릭 할 때 state에 +1을 하는 코드를 무려 4개나 만들어놨다.
버튼을 한번 클릭할 때 console.log의 결과는 1이다.
그리고 버튼을 두번 클릭 할 때 결과는 2이다.
대체 왜 setState를 네 번이나 넣었는데 state는 하나씩 증가하는 것인가 ?
이는 리액트의 라이프사이클과 연관되어있다.
리액트 라이프사이클 중 state의 변경 사항이 있을 때 해당 변경 사항을 Virtual Dom에 그려낸다.
여기서 한 가지 중요한 점이 첫 번째 setState가 동작하고 렌더링이 일어나지 않는다는 것이다.
마지막 setState의 변경 값만을 가지고 렌더링을 한다는 소리이다.
따라서 마지막 setState(state + 1)의 state 변경이 적용되고 렌더를 한 후 state 값 변경이 완료된다.
그렇다면 setState(prev => prev + 1)은 다른가 ?
function App() {
const [state, setState] = useState(0);
return (
<button
onClick={() => {
// 기존 값에 1을 더해라 !
setState((prev) => prev + 1);
// 위에 놈이 더한 값에 1을 더해라 !
setState((prev) => prev + 1);
// 위에 놈이 더한 값에 1을 더해라 !
setState((prev) => prev + 1);
// 위에 놈이 더한 값에 1을 더해라 !
setState((prev) => prev + 1);
// 네 명의 연산을 모두 해야하네 ...
console.log(state); // 4
}}
>
Click
</button>
);
}버튼을 누를 때 마다 state의 값은 4씩 증가하게 된다.
왜 setState의 고차함수를 인자로 넣어 사용하면 이전 값을 받아 올 수 있는 것인가 ?
useState의 오른쪽 마우스 클릭 후 정의로 이동(F12)을 클릭하여 useState의 코드를 확인하고
SetStateAction이라는 곳을 다시 한번 정의로 이동(F12)하여 들어가게 된다면 아래와 같은 코드가 나올 것이다.
코드에서 볼 수 있듯이 setState는 S 또는 (prevState) => S의 형태로 인자를 받을 수 있으며
함수로 인자를 받았을 경우 고차함수의 매개변수는 prevState라고 나와있다.
즉 고차함수를 인자로 넣어 주고 고차함수의 매개변수는 prevState를 사용하게 된다는 것이다.
이로서 useState(state + 1)과 useState(prev => prev + 1)의 차이를 확실하게 공부하였다.
참조 사이트 🙏
유튜버 화라리님의 리액트의 setState() 제대로 사용하기
https://www.youtube.com/watch?v=hSdVDBPTT0U
