sohyeon kim

[React] 최적화 & 리렌더링 막기(2) : useCallback, 함수 캐싱[React] 최적화 & 리렌더링 막기(1) : React.memo, 자식 리렌더링 막기 💡 리렌더링의 발생하는 경우 1. 컴포넌트에서 state 가 바뀌었을 때 2. 컴포넌트가 내려받은 props 가 바뀌었을 때 3. 부모 컴포넌트aotoyae.tistory.com  🫐 useMemo : 값을 기억한다. 반환되는 값이 바뀌면 리렌더 할 거다. 아래와 같이 무거운 작업을 하는 컴포넌트가 있을 때리렌더링을 매번 해버리면 매번 로딩이 오래 걸린다.function App() { return ( 네비게이션 바 FOOTER );}function HeavyComponent() { co..

[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..

💡 props 없이 데이터를 공유해보자 App.jsx ➡️ GranFa.jsx ➡️ Father.jsx ➡️ Child.jsx App.jsx import "./App.css"; import GrandFa from "./components/GrandFa"; function App() { return ; } export default App; FamilyContext.js createContext 를 만든다. import { createContext } from "react"; export const FamilyContext = createContext(null); GranFa.jsx 데이터를 내려줄(공유할) 그랜파 파일에 FamilyContext import import { FamilyContext } f..

💡 useRef : DOM 요소에 접근할 수 있도록 하는 훅 state 와 비슷하게 저장한다는 느낌. state : 리렌더링이 꼭 필요한 값을 다룰 때 사용, 렌더링이 일어나면 내부 변수들 초기화 (버튼이 눌리면 숫자가 올라가야할 때!) ref : 리렌더링을 발생시키지 않는 값을 저장할 때 사용, 내부 변수 초기화 XXX import { useRef, useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); const countRef = useRef(0); const style = { border: "1px solid black", margin: "10px", padding: "10..

💡 리액트 훅들에 알아보자 💡 useEffect  : 렌더링 시 특정한 작업을 해야할 때 설정하는 훅- 컴포넌트가 화면에 보여졌을 때- 컴포넌트가 화면에서 사라졌을 때(return)import "./App.css";import { useEffect } from "react";function App() { useEffect(() => { console.log("hello"); {/*콘솔에 hello 출력*/} }); return useEffect;}export default App; 화면이 렌더링될 때 콘솔에 값이 출력된다. import "./App.css";import { useEffect, useState } from "react";function App() { const [value,..