코딩하는 둥식이

🔎 useRef : dom을 변경할 때 사용 - html(요소)나 컴포넌트의 메모리 주소를 가져와 객체(래퍼런스) 형식으로 관리할 수 있음 - current 속성을 가지고 있는 객체는 반환한다. - current 값이 바뀌어도 재렌더링 되지 않음 - 재렌더링시에 current 값는 사라지지 않음 1️⃣ 색상 변경하기 ① 박스 배경색 디자인 import { useRef } from 'react'; import './App.css'; // useRef(디자인) // dom을 변경할 때 사용 function App() { const myRef = useRef(null); return ( {myRef.current.style.backgroundColor='red';}}>색변경 박스 ); } export defa..

🔎 useMemo : 컴포넌트의 성능을 최적화 시킴 ※ Memoization : 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용 함 ⭐ useMemo 동작순서 : 렌더링 ➡ Component 함수 호출 ➡ Memoize된 함수 재사용 ※ 함수형 컴포넌트 : 렌더링 ➡ Component 함수 호출 ➡ 모든 내부 변수 초기화 ❗ 값을 재활용하기 위해 따로 메모리를 소비해서 저장해놓은 것이므로 꼭 필요할때만 사용해야 한다! 1️⃣ 기본값 세팅 import { useState } from 'react'; import './App.css'; // map, filter, concat, spread, slice function App() { // useMemo => 메모라이제이션(연..