[React] useEffect vs useLayoutEffect

Mon, 18 Apr 2022 09:40:42 GMT

useEffect hook만 사용하다 useLayoutEffect hook을 알게되어 차이점을 기록하려한다. 두 hook은 화면이 렌더링될 때 실행된다는 점에서는 동일하다. 그러나 약간의 차이점이 존재한다.

1) useEffect 화면이 레이아웃과 배치가 끝난 이후 실행된다. 아래의 코드를 살펴보자

function app() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(25);
  },[]);
  return(
      {count}
  )
}

위의 코드는 화면이 렌더링 될때 count state를 25로 변경해준 후 렌더링 할 것이다. 그러나 화면을 새로고침을 해보면 표시되는 count가 initialState값인 0이었다가 아주 빠르게 25로 변경되는 것을 알 수 있다. -> 화면이 렌더링 될 때 먼저 count state를 initialState로 레이아웃배치와 그리기를 완료한 후 그제서야 state를 우리가 설정한 25로 변경해줌을 알 수 있다.

그렇다면 useLayoutEffect는 어떻게 동작할까? 2)useLayoutEffect 화면이 레이아웃배치와 그리기전에 먼저 실행된다. 다음 코드를 살펴보자

function app() {
  const [count, setCount] = useState(0);
  useLayoutEffect(() => {
    setCount(25);
  },[]);
  return(
      {count}
  )
}

보면 useEffect를 사용했을 때와 별반 차이가 없어 보인다. 그러나 useLayoutEffect를 사용하면 useEffect를 사용했을 때와 달리 count state가 initialState가 아닌 setCount로 설정한 값으로 처음부터 렌더링 되는 점을 알 수 있다.

따라서, 화면이 렌더링될때 상태값에 의존을 많이 하고 있다면 useEffect를 사용하는 것보다 useLayoutEffect를 사용하는 것이 원하는 결과를 얻을 수 있을 것이다.

[RN] 에뮬레이터 실행 에러

Sat, 16 Apr 2022 16:52:52 GMT

이제까지 잘만 실행되던 에뮬레이터가 갑자기 아래 에러가 발생하면서 실행이 안되기 시작했다..... error Failed to launch emulator. Reason: Could not start emulator within 30 seconds.. 그리고 에뮬레이터가 실행되면서 could not automatically detect an adb binary....등의 메세지가 떴다.

그래서 열심히 구글링을 해보니.. 백신이 adb.exe파일을 바이러스 취급해서 실행이 안되는 문제라고 한다.

해결은 다음과 같은 방법으로 했다. 에뮬레이터의 설정에 들어가서 use detected adb location옵션을 꺼주었다. 안드로이드 스튜디오 공식문서에 가보니 안드로이드 스튜디오 외부에서 에뮬레이터를 실행하고 특정 adb실행파일을 사용하려면 이 옵션을 선택 해제해주어야 한다고 한다.

growing_dev.log

[React] useEffect vs useLayoutEffect

[RN] 에뮬레이터 실행 에러