useLayoutEffect & useDebugValue

useLayoutEffect

이 함수의 시그니처는 useEffect와 동일하긴 한데, 모든 DOM 변경 후에 동기적으로 발생합니다. 이것은 DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용하세요. useLayoutEffect의 내부에 예정된 갱신은 브라우저가 화면을 그리기 이전 시점에 동기적으로 수행될 것입니다. (React 공식문서)

출처 : https://github.com/donavon/hook-flow

useEffect 훅을 사용할 경우 DOM의 레이아웃 배치와 페인트가 끝난 후 비동기적으로 실행됩니다.

따라서 훅 내부에 DOM에 영향을 주는 코드가 있는 경우 화면 변경이 매끄럽지 않을 수 있습니다.

반면 useLayoutEffect 훅을 사용할 경우 페인팅 되기 전 동기적으로 실행됩니다.

따라서 useEffect를 사용하여 생기는 문제점을 해결할 수 있습니다.

하지만 동기적으로 실행되고 내부의 코드가 모두 실행된 후 painting 작업을 거치기 때문에 로직이 복잡할 경우 사용자가 레이아웃을 보는데까지 시간이 오래걸린다는 단점이 있습니다.

// useEffect를 사용하는 경우 '그의 이름은 이며, 나이는 0살 입니다.' 가 화면에 잠시 표시된 후 '그의 이름은 김땡땡이며, 나이는 25살 입니다.' 가 표시됩니다.
// useLayoutEffect를 사용하는 경우 '그의 이름은 김땡땡이며, 나이는 25살 입니다.' 가 바로 표시됩니다.
function App() {
  const [age, setAge] = useState(0);
  const [name, setName] = useState("");
  
  useLayoutEffect(() => {
    setAge(25);
    setName("김땡땡");
  }, []);
  
  return (
    <>
      <div className="App">{`그의 이름은 ${name} 이며, 나이는 ${age}살 입니다.`}</div>
    </>
  );
}

useDebugValue

useDebugValue는 React 개발자도구에서 사용자 Hook 레이블을 표시하는 데에 사용할 수 있습니다.(React 공식 문서)

export default function useUser() {
  const [user, setUser] = useState(getUser())

  useDebugValue(user == null ? 'No User' : user.name)

  return [user, setUser]
}

• React 개발자 도구의 Component