[다시] 메모이제이션 Hooks (useMemo Vs useCallback)

useCallback과 useMemo는 모두 React에서 메모이제이션을 위해 사용하는 Hook이지만, 그 용도와 대상이 다르다. 1. 메모이제이션의 대상useCallback: 특정 함수(function)를 메모이제이션 -> 컴포넌트가 리렌더링될 때 동일한 함수 인스턴스를 재사용하고 싶을 때 사용 useMemo: 특정 값(value)을 메모이제이션  -> 연산 결과를 저장하여 불필요한 재계산을 방지하고 싶을 때 사용 2. 사용 목적 ✅ useCallback: 자식 컴포넌트에 전달되는 함수가 불필요하게 다시 생성되지 않도록 최적화하기 위해 사용합니다. 특히, 자식 컴포넌트가 React.memo로 감싸져 있을 때 효과적예시:const memoizedCallback = useCallback(() => { d..

[다시] React Hooks + TypeScript

1. useState와 TypeScript상태(state)의 타입을 명시✅ 기본 타입 지정 (string, number, boolean 등)import { useState } from "react";function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>+ );}✅ 객체 상태 관리 (interface 사용)interface User { name: string; age: number;}function UserProfile() { const [user, setUser] = useState(null); return ( ..

보호되어 있는 글입니다.

1. craco를 설치한다. yarn add @craco/craco craco-alias 2. tsconfig.path.json 파일 생성 후 아래와 같이 paths 안에 등록하고 싶은 경로와 그 경로의 별칭을 추가해준다. { "compilerOptions": { "baseUrl": ".", "paths": { "@src/*": ["src/*"], "@hooks/*": ["src/hooks/*"], "@components/*": ["src/components/*"], "@layouts/*": ["src/layouts/*"], "@pages/*": ["src/pages/*"], "@typings/*": ["src/typings/*"], "@utils/*": ["src/utils/*"] } } } 3. cr..

"Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree " 프로젝트를 생성하고, npm run start를 하자마자 오류가 났다. 일단 이 에러가 난 이유는, 내 리액트 프로젝트는 4.44.2 버전의 웹팩이 필요한데, 디펜던시 트리 상위 레벨에서 4.43.0버전 웹팩이 발견됐다(?) 는 것이다. 이게 문제가 되니 이 4.43.0 webpack을 포함하는 node_module 삭제해라. (즉, user\node_modules를 삭제해야 함.) ※ 해결 방법1 ※ 위의 내용을 알고있는 상태에..