[React.js] useEffect, useLayoutEffect

1. useEffect

useEffect()는 hook을 사용하여 리액트로 개발하는 개발자들은 안 써본 사람이 없을 정도로 많이 쓰이는 hook이다.

class 컴포넌트 방식에서 쓰이는 몇 개의 라이프사이클 메서드를 대체하여 사용되어지고 있다.

1. componentDidMount()
2. componentDidUpdate()
3. componentWillUnMount()

useEffect를 사용하는 자세한 방법은 생략하겠다.

1-1. useEffect의 실행 시점

useEffect가 실행될 시점은 언제일까?
코드로 예시을 들어보면,

const app = () => {
  
  const [temp, setTemp] = useState('');
  
  useEffect(()=>{
    setTemp('samsung');
  }, [])
  
  return(
    <>{temp} is good!</>
  )
}

위의 코드가 동작하는 순서를 분석해보면,

1. <>{temp} is good!</> rendering >> is good!
2. useEffect() 실행 >> setTemp('samsung')
3. state 값의 변경으로 re-rendering
4. <>{temp} is good!</> rendering >> samsung is good!

이 순서로 동작 되는 것을 알 수 있다.

useEffect()는 컴포넌트 렌더링이 끝난 후에 실행된다.

1-2. 위 코드의 문제점

위의 코드 같은 경우, 매우 간단한 코드이기 때문에 문제가 없을 수 있다.

위의 코드가 매우 무거운 코드라고 가정해보자.

렌더링 되어 1번 순서가 실행 될 것이다. 하지만 useEffect()가 실행되지 않았기 때문에 state는 아직 빈 문자열이다. 따라서 사용자의 화면에는

is good!

이 출력 될 것이다. 출력 되고 난 뒤에야 useEffect()가 실행되어 state가 변경되고 나서야 우리는 정상적인 결과물을 볼 수 있다.

samsung is good

사용자는 짧은 시간이든 긴 시간이든 is good! 이라는 의미 없는 문장을 보고 있어야 한다는 것이다. 뭐가 좋다는건지도 모르고 말이다. 이것은 사용자 경험을 고려한다면 반드시 수정되어야 할 것이다.

2. useLayoutEffect()

useLayoutEffect()는 위와 같은 문제를 개선해준다. useLayoutEffect()는 DOM이 rendering 되기 전에 실행되므로 사용자가 의미 없는 화면을 볼 필요가 없어진다.

코드 실행 순서를 보자.

const app = () => {
  
  const [temp, setTemp] = useState('');
  
  useLayoutEffect(()=>{
    setTemp('samsung');
  }, [])
  
  return(
    <>{temp} is good!</>
  )
}

1. useLayoutEffect() 실행 >> state 변경
2. <>{temp} is good!</> rendering >> samsung is good!

2-1. useLayoutEffect() 단점

useLayoutEffect()는 동기적으로 실행된다

따라서 너무 복잡한 로직을 useLayoutEffect() 안에 넣으면 동기적으로 수행되기 때문에 사용자가 오랫동안 빈 화면을 봐야할 수도 있기 때문에 가능하면 useEffect()를 기본적으로 사용하는 것을 권장한다.