useCallback2 [react] useCallback 리액트에서 리렌더링이 빈번한 것은 좋지 않다. 리렌더링을 줄이는 것이 중요한데 이 작업을 최적화한다고 할 수 있다. 불필요한 리렌더링이 발생하지 않도록 하는 최적화 방법에 자주 사용되는 것 중 하나는 바로 useCallback을 사용하는 것이다.이 외에도 컴포넌트를 캐싱하는 memo(React.memo)와 값을 캐싱하는 useMemo가 있다. useCallback오늘 알아볼 훅은 useCallback이다.useCallback은 함수를 캐싱한다고 할 수 있다. 함수를 메모리에 저장하여 매번 새로 생성되지 않도록 할 수 있고, 의존성 배열을 추가하여 원하는 때에 다시 메모리에 저장하도록 지정할 수 있다. 아래의 코드는 App 컴포넌트 하위에 Test 컴포넌트와 FileDrop 컴포넌트가 있는 구조이다. .. 2024. 7. 17. react 최적화 React.memo / useCallback / useMemo 리액트에서 렌더링이 자주 일어나는 것은 좋은 상황이 아니다. 렌더링은 필요할 때만 되어야 한다. 최적화 작업을 통해 개선할 수 있다. 최적화 방법 React.memo : 컴포넌트 useCallback : 인자로 들어오는 함수 useMemo : value(함수 리턴값 또는 값 그 자체) memo (React.memo) 컴포넌트를 메모리에 저장한다. React.memo(컴포넌트명, 비교함수) React.memo는 얕은 비교를 수행한다. 만약 다른 비교를 원한다면 두 번째 인자에 비교함수를 넣어주면 된다. React.memo로 컴포넌트를 감싸면 컴포넌트를 메모리에 저장한다. (memoization) 렌더링 시에 값이 변경되었는지 확인할 때 변경이 없을 경우 메모리에 저장된 값을 재사용한다. 재사용하기 때문에 .. 2024. 1. 26. 이전 1 다음
