12.1 useCallback (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

useCallback

• 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅이다.
• 렌더링 성능을 최적화 할때 사용하는 훅
• 선택한 함수를 리액트 내부에 저장하고 선택한 함수 객체가 실행될 때마다 이를 재사용할 수 있게 한다.
• 첫 번째 인자는 반환할 콜백과 두 번째 인자로 의존성 배열을 갖는다.

리액트에서는 컴포넌트를 재평가하고 함수를 재실행하는 일이 빈번한데, 자바스크립트에서는 객체가 같은 값을 가진 것 처럼 보여도 다른 객체로 인식하기 때문에 함수가 재실행 될 때, 코드 작성자의 생각대로 코드가 안돌아갈 수가 있다.

이러한 함수 재생성을 방지하기 위해 useCallback을 사용할 수 있다.

useCallback의 첫번째 인자인 함수 객체를 리액트 내부에 저장해주어 컴포넌트 함수가 재실행 되더라도 useCallback안의 함수 객체는 바뀌지 않아서 객체의 값이 달라지는 일이 없어진다.

function App() {
  const [showParagraph, setShowParagraph] = useState(false);
  const [allowToggle, setAllowToggle] = useState(false);

  console.log("앱 러닝");
  
  // useCallback 사용
  const toggleParagraphHandler = useCallback(() => {
    if (allowToggle) {
      setShowParagraph((prevShowParagraph) => !prevShowParagraph);
    }
  }, [allowToggle]);

  const allowTogglehHandler = () => {
    setAllowToggle(true);
  };

  return (
    <div className="app">
      <h1>Hi there!</h1>
      <DemoOutput show={showParagraph} />
      <Button onClick={allowTogglehHandler}>Allow Toggle!</Button>
      <Button onClick={toggleParagraphHandler}>Toggle Paragraph!</Button>
    </div>
  );
}

export default App;