React

[TIL/React] 2023/03/18

Updating state based on the previous stateuseState를 활용하며 한 가지 의문점이 생겼다. 의문점은 다음과 같다.위 코드에서 setCount 함수를 세 번 연속으로 작성한 까닭은, button을 한 번 클릭할 때마다 숫자가 '3'씩

2023년 3월 18일2min read

Updating state based on the previous state

useState```를 활용하며 한 가지 의문점이 생겼다. 의문점은 다음과 같다.


![](https://velog.velcdn.com/images/minkwan/post/c0fa90d2-5b55-4b55-9b05-e16ab737dd26/image.png)

위 코드에서 setCount 함수를 세 번 연속으로 작성한 까닭은, button을 한 번 클릭할 때마다 숫자가 '3'씩 증가하도록 설정하기 위함에 있었다. 그런데 의도한 방향으로 작동하지 않았다.

count가 여전히 '1'씩 증가하는 모습을 보인다. 

![](https://velog.velcdn.com/images/minkwan/post/9d54e38a-6b70-4d46-8b03-d218480733b2/image.png)

React의 ```setState 함수```는 일반적으로 ```비동기적```으로 작동한다.

위의 코드는 결국 '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을 사용하여 컴포넌트에 props를 전달하려면, useLocation 객체의 ``state 속성``을 사용하여 값을 전달할 수 있다.

product 페이지에서 location을 입력해보니, props가 넘어온 것을 확인할 수 있었다. 하지만 이것이 정확이 무엇을 의미하는지는 아직 잘 모르겠다.

아래의 코드들은 useNavigate와 useLocation을 이해하기 위해 작성한 습작이다. 차후에 복습할 때 활용하도록 하자.

회고

뭐 하나 쉬운 개념이 없다 ㅜㅜ 귀여운 개발진스로 힐링하고 공부 마무리, 내일도 화이팅!