sohyeon kim

💡 Custom Hooks 을 사용해 보자. 기존 input 값을 받아오던 방식 import { useState } from "react"; function App() { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const onChangeName = (e) => { // 패스워드 관리 함수와 똑같이 생겼다 setName(e.targe.value); }; const onChangePassword = (e) => { // 네임 관리 함수와 똑같이 생겼다 setPassword(e.targe.value); }; return ( Custom Hooks ); } export default App; 반복되는 ..

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