Updating state based on the previous state
useState를 활용하며 한 가지 의문점이 생겼다. 의문점은 다음과 같다.
위 코드에서 setCount 함수를 세 번 연속으로 작성한 까닭은, button을 한 번 클릭할 때마다 숫자가 '3'씩 증가하도록 설정하기 위함에 있었다. 그런데 의도한 방향으로 작동하지 않았다.
count가 여전히 '1'씩 증가하는 모습을 보인다.
React의 setState 함수는 일반적으로 비동기적으로 작동한다.
비동기적 처리(Asynchronous processing)란, 작업이 순차적으로 처리되지 않고, 동시에 여러 작업이 동시에 처리될 수 있는 방식을 말한다.
위의 코드는 결국 'setCount(count+1)'이라는 세 가지의 주문을 받은 상태라고 비유할 수 있다. setState 함수는 비동기적으로 작동하기에, 세 줄의 코드는 각각 진동벨을 받고 대기 중인 상태인 것이다.
'setCount(count+1)'이라는 세 가지의 동작은 보장된 순서라는 것이 없기 때문에 각각이 'count'라는 값을 바라보게 된다. 각각의 작업간에 의존성이 제어되지 않는다는 뜻이다.
비동기적 처리는 작업을 빠르게 처리할 수 있고, 작업이 끝나지 않아도 다른 작업을 수행할 수 있으므로 성능을 향상시키고, 사용자 경험을 개선할 수 있다. 다만, 비동기적 처리는 순서를 보장하지 않기 때문에, 작업 간의 의존성이 있는 경우에는 작업을 제어하기 어려울 수 있다는 단점이 있다.
작업의 순서를 보장하여 작업 간의 의존성을 제어하기 위해 callback function을 사용하고, 이러한 과정에서 등장하는 핵심적인 개념이 pending state이다. 한마디로 동기적으로 작동하는 척(=정해진 순서가 보장되어 있는 것처럼 가장)을 하기 위해 활용하는 개념이다.
버튼을 세 번 클릭했고, UI에는 '9 times'로 렌더링된다. 콘솔을 확인해보면 여전히 비동기적으로 작동한다. callback function을 활용한다고 해서 비동기적 방식이 동기적 방식으로 변하는 것은 아니라는 점을 확인할 수 있다. 말 그대로 동기적으로 작동하는 척만 하는 것이다. 코드에서의 'prev'가 바로 'pending state'이다.
useNavigate & useLocation
useNavigate는 페이지를 이동시키는 데 사용하는 Hook이다. useNavigate를 사용하면, 프로그래밍 방식으로 브라우저의 주소를 변경하거나, 라우트를 변경할 수 있다.
useLocation은 현재 브라우저의 URL 주소와 관련된 정보를 가져올 수 있게 해주는 함수이다.
useLocation을 사용하여 컴포넌트에 props를 전달하려면, useLocation 객체의 state 속성을 사용하여 값을 전달할 수 있다.
product 페이지에서 location을 입력해보니, props가 넘어온 것을 확인할 수 있었다. 하지만 이것이 정확이 무엇을 의미하는지는 아직 잘 모르겠다.
아래의 코드들은 useNavigate와 useLocation을 이해하기 위해 작성한 습작이다. 차후에 복습할 때 활용하도록 하자.
회고
뭐 하나 쉬운 개념이 없다 ㅜㅜ 귀여운 개발진스로 힐링하고 공부 마무리, 내일도 화이팅!
