useEffect(), useLayoutEffect()

공통점

  • 생명주기 메서드를 만들어 낼 수 있고 의존하는 상태값의 변화에 따른 부수 효과를 다룰 수 있다.

  • 화면에 렌더링된 이후에 비동기로 처리되어야 하는 특정 작업할 때

  • 매개변수

    • 첫번째 매개변수로 등록된 콜백함수는(이후 콜백함수) 특정 상태값이 변경되었을때 작동하는 부수 효과이다.

    • 두번째 매개변수로는 배열을 받는데 이 배열의 요소의 값이 변경되면 콜백함수가 호출된다.

      1. 두번째 인자에 의존 특정값 : 의존값이 변경 됐을 때만 호출된다. useEffect(() => {console.log(...)}, [count])

      2. 두번째 비어두면 : 다른쪽의 상태, 프롭이 변경될 때 마다 매번 호출 모든 상태 변화에 반응한다. useEffect(() => {console.log(...)})

      3. 두번째에 빈배열 : 처음만 호출된다. useEffect(() => {console.log(...)}, [])

useEffect(() => {
  (컴포넌트가 생길 때 수행 작업 또는 의존성 값이 바뀔때);
  return {
      (컴포넌트가 사라질 때 수행 작업 또는 의존성 값이 바뀌기 전);
  }
}, [의존성])

// useEffect()와, useLayoutEffect() 
// 함수를 이용해 컴포넌트가 생기고, 사라질 때를 제어할 수 있다.
// 의존성을 추가해서, 값이 변경되기 직전과 변경된 직후의 값을 제어할 수 있다.

차이점

  • 훅의 역할은 동일하지만 사용자의 경험이 다르다.

  • useEffect()

    • DOM의 레이아웃 배치와 페인트가 끝난 후 함수를 호출

    • 상태값이 이펙트에 의존할 경우 약간 불편한 사용자 경험으로 보여질수있다.

    • 렌더링순서

      1. <p>나의 이름은 OOO입니다.</p> 를 렌더링

      2. 이펙트 내부의 set이름 호출

      3. 재렌더링 수행 -> <p>나의 이름은 홍길동입니다.</p>

  • useLayoutEffect()

    • 위의 문제를 해결하기 위해 등장한 훅입니다.

    • 렌더링순서

      1. 이펙트 내부의 set이름 호출

      2. <p>나의 이름은 홍길동입니다.</p> 를 렌더링

정리

  • useEffect()는 DOM이 화면에 그려진 이후에 호출.

  • useLayoutEffect()는 DOM이 화면에 그려지기 전에 호출.

  • 따라서 렌더링할 상태가 이펙트 내에서 초기화 되어야 할 경우, 사용자 경험을 위해 useLayoutEffect()를 활용하면 된다.

PreviousReact HooksNextDeployment

Last updated