(썸네일 이미지는 해당 글을 요약 후 ChatGPT 이미지로 생산한 것 입니다.)React에서 최적화 얘기하면 항상 따라오는 말이 있다.useMemo는 값을 메모이제이션 (value)useCallback은 함수를 메모이제이션 (func)말은 쉬운데, 실제로는 “언제 써야 하는지 / 뭐가 다른지”가 헷갈림...이번 글은 실무에서 자주 터지는 케이스 중심으로 차이를 정리함.결론부터useMemo: 값(계산 결과)을 캐싱한다.useCallback: 함수(콜백)의 참조를 캐싱한다.그리고 사실상 이렇게 생각해도 된다.useCallback(fn, deps) 는useMemo(() => fn, deps) 의 syntax sugar.즉, 둘 다 “캐싱”이 맞고, 캐싱 대상이 다르다.왜 캐싱이 필요할까? (React의 리렌..

1. React란?UI 라이브러리: 사용자 인터페이스를 효율적으로 만들기 위한 JavaScript 라이브러리컴포넌트 기반: UI를 재사용 가능한 컴포넌트 단위로 분리Virtual DOM: 변경된 부분만 효율적으로 업데이트2. React 시작하기설치 (Vite 예시)npm create vite@latest my-app -- --template reactcd my-appnpm installnpm run dev폴더 구조 예시src/ ├─ App.jsx ├─ main.jsx └─ components/3. JSXJavaScript + XML 문법반드시 부모 태그로 감싸야 함JS 표현식은 {} 안에 작성function Hello() { const name = "React"; return Hello, {name}..