Per ardua ad astra.

FlatList들어가며리액트 네이티브(React Native)의 @FlatList@ 컴포넌트에 대해 정리해본다. FlatList개념효율적으로 대량의 스크롤 가능한 항목을 렌더링하기 위해 사용되는 컴포넌트최적화된 가상 스크롤링 기능을 제공하여 성능 문제를 줄이고, 스크롤 시 필요한 항목만 렌더링한다.@ScrollView@ 컴포넌트와의 차이점 주요 속성속성설명@data@- 렌더링할 데이터 배열(Array)을 전달- 배열의 각 요소는 렌더링될 항목의 데이터@renderItem@- 데이터를 어떻게 렌더링할지 정의하는 함수- 매개변수로 @{ item, index }@ 형태의 객체를 받는다.@keyExtractor@- 각 항목의 고유 키를 반환하는 함수- 기본적으로 @item.key@ 또는 @item.id@를 사용..

코드 분할(Code Splitting) : useTransition 훅, Suspense 컴포넌트, lazy 함수들어가며리액트(React.js)에서 코드 분할(Code Splitting)의 장점과 함께 사용되는 @useTransition@ 훅과 @Suspense@ 컴포넌트, @lazy@ 함수에 대해 정리해본다. 코드 분할(Code Splitting)개념리액트 애플리케이션에서 코드의 일부분을 나눠서 필요한 시점에 로드하는 방식 장점애플리케이션을 더 작은 청크(Chunk)로 나눔으로써 초기 로드 시 필요한 자바스크립트 크기를 줄인다.이를 통해 첫 화면 렌더링 속도가 빨라지며, 느린 네트워크 환경에서도 빠르게 응답할 수 있다.사용자가 필요로 하지 않는 코드는 나중에 로드되며, 상호작용할 때만 필요한 코드가 동..

useMemo 훅들어가며리액트(React.js)의 @useMemo@ 훅에 대해 정리해본다. useMemo 훅개념컴포넌트의 성능 최적화(Optimization)를 위해 자주 사용되는 훅특정 연산의 결과를 메모이제이션(Memoization)하여 의존성 배열에 있는 값들이 변경되지 않는 한 해당 연산을 다시 수행하지 않도록 한다.불필요한 재연산을 방지하고 성능을 향상시킬 수 있다. 사용 방법첫 번째 인자는 메모이제이션할 값을 반환(return)하는 함수이다. (@computeExpensiveValue@).두 번째 인자는 의존성 배열(Dependency Array)로, 이 배열의 값들이 변경될 때만 메모이제이션된 값이 다시 계산된다.const memoizedValue = useMemo(() => computeE..

useCallback 훅들어가며리액트(React.js)에서 사용되는 @useCallback@ 훅에 대해 정리해본다. useCallback 훅개념컴포넌트의 성능 최적화(Optimization)를 위해 자주 사용되는 훅함수를 메모이제이션(Memoization)하여 컴포넌트가 리렌더링될 때마다 함수가 재생성되는 것을 방지한다. 사용 방법@useCallback(() => {}, [])@와 같이 사용한다.첫 번째 인자로 함수를 받고, 두 번째 인자로 의존성 배열(Dependencies Array)을 받는다.const memoizedCallback = useCallback(() => { doSomething(a, b);}, [a, b]); ⇒ 리액트는 컴포넌트가 리렌더링될 때마다 해당 함수를 다시 생성하지 않고,..

Image 컴포넌트들어가며Next.js에서 기본으로 제공하는 Image 컴포넌트에 대해 정리해본다. Image 컴포넌트개념Next.js에서 다양한 퍼포먼스 기능과 편리한 설정을 지원하는 컴포넌트 이미지 컴포넌트를 이용하면 이미지 불러오기 작업을 최적화할 수 있다. 또한 이미지 크기 조정, 지연 로딩(Lazy Loading)을 지원하며, WebP와 같은 최신 이미지 형식이 자동으로 처리된다. 다양한 기기와 화면 크기에 맞게 이미지 크기를 유동적으로 조절할 수 있다. 사용 방법기본 사용법@next/image@ 모듈을 불러와서 사용한다.import Image from 'next/image';export default function Home() { return ( Next.js Image E..

지연 로딩(Lazy Loading)들어가며리액트(React.js)에서 애플리케이션을 배포하기 전에 코드 최적화 작업을 해주어야 하는데, 이때 지연 로딩(Lazy Loading)을 활용할 수 있다.지연 로딩(Lazy Loading)이 무엇인지 간단히 정리해본다. 지연 로딩(Lazy Loading)개념필요한 시점에 특정 컴포넌트나 모듈을 로드하여 초기 로딩 시간을 줄이고 애플리케이션의 성능을 향상시키는 기술이 방법을 사용하면 초기 로딩 시 불필요한 코드가 로드되지 않으며, 사용자 경험을 개선할 수 있다.  기본적인 사용 방법@React.lazy@와 @Suspense@를 사용하면 컴포넌트를 동적으로 @import@하고 로딩이 완료될 때까지 대체 UI(fallback)를 표시할 수 있다. ① 컴포넌트 동적 im..