코딩/React33 React useCallback과 useMemo 차이 성능 최적화란?useCallback과 useMemo는 성능 최적화를 위해 고민하면서 접하게 되었다. 그렇다면 성능 최적화란 무엇일까?성능 최적화란 컴포넌트가 불필요하게 재렌더링되거나 시간이 많이 걸리는 연산이 반복되는 것을 방지하여 리소스를 효율적으로 관리하는 것을 말한다. 이를 위해 메모이제이션이라는 기법을 사용하게 되는데, 메모이제이션은 이전에 계산한 값을 기억해 두었다가 동일한 입력이 들어왔을 때 다시 계산하지 않고 저장된 값을 재사용하는 방법이다. 이제 메모이제이션을 사용하는 useCallback과 useMemo에 대해 알아보자useCallback란?useCallback은 함수를 메모이제이션하는 데 사용된다. useCallback을 통해 함수가 불필요하게 다시 생성되는 것을 방지하고, 특정 함수.. 2024. 10. 13. [React] FC(Functional Component)와 lazy, memo FC(Functional Component)란? FC는 React에서 함수형 컴포넌트를 정의할 때 사용되는 타입이다. TypeScript에서 FC라는 타입을 사용하여 컴포넌트를 정의할 때 사용된다. 함수형 컴포넌트는 컴포넌트를 더 간결하게 작성할 수 있으며, 클래스형 컴포넌트보다 메모리 관리 및 성능 면에서 장점이 있다. 또한 FC를 사용하게 되면 동기적 렌더링(컴포넌트를 호출할 때 실행되어 UI를 그림)을 하게 되어 컴포넌트가 즉시 렌더링되어야 할 때 유용하다. 아래 예시를 같이 확인해보자. 코드를 보면 클래스형 컴포넌트에 비해 함수형 컴포넌트의 코드가 더 간결한 것을 확인할 수 있다. 또한 함수형 컴포넌트에서는 Hooks를 사용해 상태(useState)와 사이드 이펙트(useEffect)를 관리하는 .. 2024. 10. 13. React란? React란?React는 사용자 인터페이스(UI)를 구축하기 위해 개발된 JavaScript 라이브러리이다. 2013년 Facebook에서 처음 개발되어 공개되었으며, 현재는 Meta와 오픈 소스 커뮤니티에 의해 유지·관리되고 있다. 컴포넌트 기반으로 설계되어 재사용성, 유연성, 성능 최적화에 장점을 가지고 있다. React의 탄생 배경Virtual DOM의 등장: Virtual DOM은 DOM의 가상 버전을 메모리에 저장하여, 실제 DOM과의 차이를 비교하고 최소한의 변경 사항만 실제 DOM에 적용하여 성능을 최적화하는 기술이다. 이를 통해 React는 복잡한 UI에서도 빠르게 동작할 수 있게 되었다.Virtual DOM : React에서 UI 성능을 최적화하기 위해 사용하는 가상화된 DOM 구조이다.. 2024. 10. 6. React Suspense Suspense란?React의 내장 컴포넌트로, 비동기 작업 중에 대체 UI를 표시하는 데 사용된다. 주로 데이터 패칭과 같은 비동기 작업을 수행하는 컴포넌트를 감싸서 데이터가 로드되는 동안 사용자에게 로딩 상태를 보여줄 수 있다. 주요 기능:로딩 상태 관리: 비동기 작업이 완료될 때까지 대체 UI(fallback)를 보여줄 수 있다.비동기 컴포넌트 렌더링: 컴포넌트가 필요한 데이터를 모두 로드한 후에만 해당 컴포넌트를 렌더링한다Loading...}> {/* 데이터 로딩 중에 표시할 UI */} {/* 비동기 작업을 수행하는 컴포넌트 */} 2024. 7. 23. 이전 1 2 3 4 ··· 9 다음
