sohyeon kim

💡 디바운싱을 쉽게 구현해 줄 라이브러리를 사용해보자. npm i --save lodash or yarn add lodash import { useState, useCallback } from "react"; import "./App.css"; import _ from "lodash"; function App() { const [searchText, setSearchText] = useState(""); const [inputText, setInputText] = useState(""); const handleSearchText = useCallback( _.debounce((text) => { setSearchText(text); }, 2000), // 2초뒤 실행 [] ); const handleCh..

[React] 최적화 & 리렌더링 막기(1) : React.memo, 자식 리렌더링 막기💡 리렌더링의 발생하는 경우 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 바뀌었을 때 3. 부모 컴포넌트가 리렌더링되면 자식컴포넌트 모두 리렌더링 💡 최적화 Optimizaaotoyae.tistory.com  🫐 useCallback : 함수를 기억하자. 함수가 바뀌면 리렌더 할 거다. function App() { console.log("App 렌더링"); const [count, setCount] = useState(0); const plusBtnHandler = () => { setCount(count + 1); }; const minusBtnHandle..