[react] 계산기/input 두 개가 서로 영향받게 하기

 

 과제로 했던 환율계산기(?)를 가지고 구현 못 했던 거 구현해보고 리팩토링 할 거 해볼 생각이다~~~ 약간 신난닷^ㅁ^

 

WBTC input에 3을 입력하면 USDC가 계산되어 나오지만, USDC input은 변경할 수 없었다! 즉 역으로 하는 건 안 됐다. 

 

 근데 보다시피 처음에 숫자가 바로 입력이 안된다. 

숫자를 누르면 밑에 $0 이 뜨고 그 다음에 한 번 더 입력해야 입력이 된다. 

 

 그리고...! 무한리렌더링 되는 현상이 발생했다,,, 

setInput하면 allTokenPrice를 계산하고 그게 계산되면 다시 setInput하고... 그럼 어카냐 

 

일단 input, input2, token, token2 중에 하나라도 바뀌면 값이 다시 계산되어야 한다.

하지만 이걸 모두 의존성 배열에 한 번에 넣어버리면 작은 수정에도 리렌더링이 일어나서 좋지 않다.

 

token, token2가 변경되면 가격을 가져오는 api 호출되고 tokenPrice, token2Price가 바뀐다. 

 

...

 

일단 useEffect내에서 상태값을 변경하는 게 아니라 상태값 변경 함수를 만들어서 그걸로만 변경할 수 있게 수정하기!

 

그리고 handleChangeInput 함수 안에서 setState를 한다. 

 

 const handleChangeInput = useCallback((value: number) => {
    setInput2(value);
  }, []);

  const handleChangeInput2 = useCallback((value: number) => {
    setInput2(value);
  }, []);

input의 상태를 변경하고 onChange 이벤트 핸들러로 작동한다.

useCallback을 쓴 이유~ 같은 입력에 대해선 이전에 생성된 함수를 재사용하기 위해서!!

 

일단 엄마 옷 골라주러 가야해서 여기까지 , , ,