범부 개발자 아등바등 살아남기

 useDebugValue 훅을 사용하면 리액트 개발자 도구에서 어떤 훅을 사용 중인지, 상태 값이 현재 어떤 상태인지 확인할 수 있다.

• 디버깅만을 위한 훅 사용으로 코드를 직관적으로 표현할 수 있다.
• 로그가 개발자 도구에 남기 때문에 콘솔이 깔끔해진다.

import React, { useDebugValue, useState } from "react";

function useCount() {
  const [count, setCount] = useState(0);

  useDebugValue(count, (count) => `현재 카운트: ${count}`);

  const addCount = () => {
    setCount(count + 1);
  };

  return [count, addCount];
}

function App() {
  const [count, addCount] = useCount();

  return (
    <div>
      {count}
      <button onClick={addCount}>숫자 변경</button>
    </div>
  );
}

export default App;

리액트 공식문서 - useDebugValue

 useLayoutEffect는 useEffect와 달리 렌더링이 되기 전 실행되어 그 결과를 렌더링에 반영한다. 또한 useLayout Effect의 콜백함수는 모두 동기적으로 실행된다는 것이 차이점이다.

• 의존성 배열: 콜백 함수와 의존성 배열을 이용해 특정 상태가 변경될 때 수행할 작업을 지정할 수 있다.

차이점

• 렌더링 차단 여부: useLayoutEffect는 모든 작업이 끝날 때까지 렌더링이 일어나지 않는다. 따라서 실행시간이 길면 렌더링도 지연된다.
• 실행시점: useLayoutEffect는 렌더링 전에 실행된다. useEffect는 렌더링 이후에 실행된다.

import React, { useState, useEffect, useLayoutEffect, useRef } from "react";

function App() {
  const contentRef = useRef(null);
  const [tooltipLeft, setTooltipLeft] = useState(0);

  useLayoutEffect(() => {
    const contentWidth = contentRef.current.offsetWidth;
    setTooltipLeft(contentWidth);
  }, []);

  useEffect(() => {
    const contentWidth = contentRef.current.offsetWidth;
    setTooltipLeft(contentWidth);
  }, []);

  return (
    <div>
      <span ref={contentRef}>안녕하세요</span>
      <div style={{ position: "absolute", top: 0, left: tooltipLeft }}>
        설명입니다.
      </div>
    </div>
  );
}

export default App;

React 공식문서 - useLayoutEffect