온라인 강의/React 완벽 가이드 [Udemy]
166. useCallback() 및 해당 종속성 **
유호야
2023. 6. 27. 01:36
반응형
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;
반응형