166. useCallback() 및 해당 종속성 **

Javascript에서 "function is clouser" 라는 것을 떠올려보자

 

왜냐하면 우리가 useCallback을 통해 리액트에게 어떤 환경에서든 함수 재생성을 하지 않게 막았기 때문이다.

따라서, 리액트가 이 함수에 사용하기 위해 저장한 allowToggle의 값은 최신의 값이 아니고, App 컴포넌트가 처음 실행된 시점의 값을 저장하고 있다

 

---

헷갈리는 개념 강의를 한 번 더 들어봐야할 것 같다!

Button callback 사용했는데 console 실행되는 문제 확인 다시 해보기

import React, { useState, useCallback } from 'react';
import DemoOutput from './components/Demo/DemoOutput';

import './App.css';
import Button from './components/UI/Button/Button';
function App() {
  console.log('APP RUNNING');

  const [showParagraph, setShowParagraph] = useState();
  const [allowToggle, setAllowToggle] = useState();

  const toggleParagraph = useCallback(() => {
    if(allowToggle) {
      setShowParagraph((prev) => !prev);
    }
  }, [allowToggle]);

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

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

export default App;