0614

in react

useEffect를 이용하여 적용하는것과

function()을 바로 호출하는것의 차이.

first code

  const onKeyDown = (e) => {

    if (e.key === "Enter") {
      setId(e.target.value);

      setLocalStorage(id);
    }
  }  
  useEffect(() => {
    if (id === "") {
      return;
    }
    history('main', {
      state: {
        username: `${id}`
      }
    })
  }, [id])

second code

  const onKeyDown = (e) => {

    if (e.key === "Enter") {
      setId(e.target.value);
    }
  }  
  useEffect(() => {
    if (id === "") {
      return;
    }
    setLocalStorage(id);
    history('main', {
      state: {
        username: `${id}`
      }
    })
  }, [id])
  여기서 첫번째 코드는 정상 작동을 하지 않고 두번째 코드는 정상 작동을 한다.

 

여기서 정상 작동이란 Enter키를 입력받았을때 localstorage 에 setItem 하는 녀석인데

이것이 useEffect를 이용하여 변화가 생겼을때 동작을 하는것

Enter키를 입력받았을때 행동하는것 

둘다 똑같은 코드라고 생각하였으나 미묘한 차이가 있었다.

 

setId 는 useState()의 세팅 폼이고 이 세팅폼에 데이터를 변경할때 바로 동작이 되지 않을수 있다는것을 

확인했다. 그렇기에 데이터가 제대로 전달이 되지않았고 localstorage 가 빈값을 가지는 경우가 발생했다.