TIL-220915 sideEffect처리하기

퀘스트 과제를 달러 환전기능을 추가하는 것으로 진행을 하고 있었는데 환전하기만 하지 말고 

이렇게 달러와 원화의 가격을 테스트 할 수 있는 테스트 인풋을 만들려고 했다. API를 통해 받아온 basePrice를 입력한 달러값에 곱하기를 해서 useState를 사용해 set을 해주는 방식으로 할려고 했는데 

 

문제가 생겼다. setState가 즉각 적으로 업데이트가 되지 않는다. 1달러를 입력을 하면 원화값에 아무것도 나오지 않고 10달러를 입력하면 1달러의 값이 100달러를 입력하면 10달러의 값이 input에 들어가는 현상을 발견했다. 

 

왜 이런 일이 벌어 졌을까?

 

달러를 입력하는 input에 입력한 값을 setDollar를 해주고 set된 달러를 달러가격만큼 곱해서 원화 값에 set을 하는 방식으로 코드를 짰었다.

setState는 비동기 방식으로 처리를 한다. 

비동기란 간단하게 말해서 작업들이 순차적으로 이루어 지지 않는다는 것이다. 즉 현재 위에 코드를 보면 setExchangeDollar가(useState setter함수임) 작업을 종료하기 전에 밑에있는 setExchangeKoreanWon이 실행이 되버린 것이다.

 

 비동기로 처리하는 이유는 하나의 페이지나 컴포넌트 안에는 많은 상태값이 존재할 수 있는데 만약 이 상태가 하나하나 바뀔 때마다 화면을 리렌더링을 한다면 문제가 발생할 수도 있기 때문이다.

 

그렇기 떄문에 리액트는 성능의 향상을 위해서 setState를 연속적으로 호출하면 batch처리하여 한 번에 렌더링하도록 하였다.

아무리 많은 setState가 연속적으로 사용되었어도 배치 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지하는 것이다.

 

batch는 React가 더 나은 성능을 위해 여러개의 state업데이트를 하나의 리렌더링으로 묶는 것을 의미한다. React는 16ms동안 변경된 

상태 값들을 하나로 묶는다. (16ms단위로 배치를 진행한다). 

 

useEffect사용하기 

 

 

useEffect의 사용방법

 

useEffect는 컴포넌트가 렌더링 될 때 마다 특정 작업(side Effect)을 실행할 수 있게 만들어 준다.

side Effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 뜻한다.

 

 

아래의 코드로 바꾸니 내가 원하는 즉각적으로 달러 -> 원화 , 원화 -> 달러로 변경이 되었다.

 

즉 setDollar의 작업이 끝난 뒤에 setKoreanWon을 해주기 때문에 즉각적으로 값을 얻을 수 있었다. 

 

어떤 경우에 사용하는 지는 알았지만 내부적으로 어떻게 동작하는지는 아직 잘 모르겠다. 퀘스트 한다는 핑계로 더 알아보지 않았다. 

내일 저녁에는 다시 useEffect를 조금 더 알아보자