[원티드] 5월 19일 TIL

코드 오류

REDUX에 값을 저장하기 위해 input 값이 바뀔때마다 useQuery로 들고온 값을 data를 넣어주려고 했는데
네트워크로 데이터는 불러져 오는데
redux에 값이 안 담기는 문제가 있었다.

  const handleChange = 
  (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value)
    dispatch(setDisease(data))
  }

setState 시점에 대해 까먹고 그냥 코드를 짜버린 잘못인데

state값의 변화는 기본적으로 화면을 리렌더링 시키고
setState는 비동기로 작동하는데
이 말은 state의 값은 setState가 호출되는 시점이 아닌, 코드가 들어있는 함수가 모두 실행된 이후에 바뀐다.

비동기로 작동하지 않으면 set이 여러개이면 그 때마다 리렌더링이 돌기때문에 비효율적이다.

따라서 useEffect에 data가 바뀔때마다 set을 시켜줄 수 있게끔 변경하였다.

  useEffect(() => {
      dispatch(setDisease(data))
  }, [data])

그런데 요번엔 또 타입 오류가 나서
팀원분에게 물어봤더니 undefined일때 예외처리를 하지 않아서 생긴 에러라고 알려주셨다

  useEffect(() => {
    if (data) {
      dispatch(setDisease(data))
    }
  }, [data])

이걸로 거의 2일을 붙잡고있었다...