나디아 성장 일기

📌 컴포넌트 렌더링 성능 이슈 & 해결 방법 컴포넌트의 잦은 리-렌더링 이슈 해결 & 렌더링을 효과적으로 관리하기 위한 방법  1. useCallback() [React] useCallback(): 컴포넌트 리렌더링 시 불필요한 함수 생성 방지📌 useCallback(): 컴포넌트가 리렌더링될 때, 함수가 불필요하게 다시 생성되는 것을 방지하기 위해 사용 함수의 메모이제이션(기억화)을 위해 사용하위 컴포넌트에 전달하는 속성 타입이 함수인tensdiary.tistory.com   2. 이펙트(Effect) 내부에서 실행되는 함수 [React] useEffect() : 렌더링 시 발생하는 사이드 이펙트 처리📌 useEffect(): 리액트 컴포넌트와 외부 시스템을 동기화할 때 사용렌더링 자체에 의해 발..

📌 커스텀 훅(Custom Hook): 여러 컴포넌트에서 재사용할 수 있는 로직을 추출해 하나의 함수로 정의한 것 코드의 재사용성을 높이고, 코드의 가독성을 개선할 수 있다.  ☑️ 빌트인 훅 함수: 리액트는 useState(), useEffect(), useRef() 등 빌트인 훅 함수를 제공한다.빌트인 훅 함수만 가지고는 모든 것을 처리할 수 없기 때문에 커스텀 훅을 만들어 사용한다.useState()useRef()useEffect()useDebugValue()useMemo()useSyncExternalStore()useCallback()useLayoutEffect()useImperativeHandle()useId()    ⏩  커스텀 훅(Custom Hook)이 필요한 경우반복되는 로직이 있을 때..

📌 useMemo(): 계산된 값을 메모이제이션하여, 종속성 배열 값이 변경되지 않는 한 불필요한 재계산을 방지하는 훅 값의 메모이제이션(값의 캐싱)을 통해 성능 최적화를 위해 사용 종속성 배열에 명시된 값이 변경되지 않는 한, 이전에 계산된 값을 재사용한다. (React는 기본적으로 컴포넌트가 리렌더링될 때마다 모든 변수를 재계산한다.) ➡︎ 불필요한 재계산 방지➡︎ 계산이 비싼 작업일 때, 성능 향상주로 계산량이 많거나, 리렌더링 시 재계산할 필요가 없는 값을 메모이제이션(memoization)하는 데 사용메모이제이션 된 컴포넌트가 불필요한 렌더링을 반복한다면, useMemo()를 사용하여 불필요한 렌더링을 줄일 수 있다.(메모이제이션 된 컴포넌트를 렌더링 제어하는 핵심 ➡︎ 컴포넌트 속성(prop..

📌 memo(): 컴포넌트의 props가 변경되지 않은 경우, 컴포넌트 리렌더링을 건너뛸 수 있는 훅성능 최적화를 위한 함수형 컴포넌트를 위한 기능컴포넌트가 불필요하게 리렌더링되는 것을 방지하는 데 사용memo는 이전과 새로운 props를 비교하여 변경이 있을 때만 컴포넌트를 리렌더링 한다.컴포넌트를 memo로 감싸면 해당 컴포넌트의 memoized 버전을 얻을 수 있다.memoized 버전의 컴포넌트는 부모 컴포넌트가 리렌더링 되어도 props가 변경되지 않았다면 리렌더링 되지 않는다.그러나 memoization는 성능을 최적화하는 것이지 보장하지 않기 때문에 React는 리렌더링 될 수도 있다. import { memo } from 'react';const SomeComponent = memo(fu..

📌 useCallback(): 컴포넌트가 리렌더링될 때, 함수가 불필요하게 다시 생성되는 것을 방지하기 위해 사용 함수의 메모이제이션(기억화)을 위해 사용하위 컴포넌트에 전달하는 속성 타입이 함수인 경우 캐싱(caching)할 때 사용리렌더링 시 함수 참조를 유지하고 싶을 때, 특히 자식 컴포넌트에 콜백 함수를 전달할 때 유용하다.해당 함수의 종속성(dependency) 배열에 지정된 값들이 변경되지 않는 한, 리-렌더링 간에 동일한 함수임을 보장하여 동일한 함수 인스턴스를 재사용할 수 있다.불필요한 함수 재생성을 방지하여, 성능 최적화에 도움이 된다.메모이제이션 된 함수가 많아지면, 관리 비용이 오히려 커질 수 있기 때문에 반드시 필요할 때만 사용하는 것이 좋다.  ⏩ useCallback 사용 이유..

📌 Thunder Client: REST API 요청을 테스트하고 디버깅할 수 있는 VS Code 확장 프로그램 Thunder Client - Rest API Client Extension for VS CodeThunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Codewww.thunderclient.com  ⏩ 주요 기능REST API 요청 테스트GET, POST, PUT, DELETE 등 다양한 HTTP 요청을 쉽게 만들고 테스트할 수 있다.응답 검사API 응답을 JSON, XML 등 다양한 형식으로 확인하고, 응답 시간, 상태 코드 등을 확인할 수 있다.환경 변수환경 변수를 설정하여 개발, 테..

📌 useLayoutEffect(): 브라우저가 화면을 그리기 전에 실행되는 useEffect 브라우저가 화면을 다시 그리기 전에 레이아웃 계산 DOM이 변경된 후, 브라우저가 화면에 반영하기 전에 실행된다.👉 레이아웃이나 DOM 관련 조작에 적합👉 애니메이션 라이브러리 사용useLayoutEffect(setup, dependencies?)매개변수setup: Effect의 로직이 포함된 함수clean-up 함수를 반환할 수도 있다.컴포넌트가 DOM에 추가되기 전에 React는 setup 함수를 실행한다.dependencies가 변경되어 다시 렌더링 될 때마다, React는 (cleanup 함수를 제공했다면) 먼저 이전 값으로 cleanup 함수를 실행한 다음, 새로운 값으로 setup 함수를 실행한..

📌 useImmer(): React에서 상태 관리를 쉽게 할 수 있도록 도와주는 Hook React의 useState 훅과 Immer 라이브러리가 제공하는 불변 업데이트 패턴을 결합한 커스텀 React 훅 React 상태 관리를 쉽게 하고, 복잡한 상태 업데이트를 간단하게 할 수 있는 훅 중첩된 객체나 배열 상태를 업데이트할 때 유용 ❓언제 사용하면 좋은가 중첩된 구조의 상태를 자주 업데이트하는 경우 상태 업데이트 시 불변성을 유지해야 하는 경우 코드의 가독성을 높이고 싶을 때 ⏩ 장단점 장점 간단한 상태 관리 : 중첩된 객체와 배열의 상태 업데이트를 간단하게 해준다. 불변성 자동 관리 : immer가 불변성을 자동으로 관리해 주므로, 직접 불변성을 신경 쓸 필요가 없다. - 상태가 의도치 않게 변형되는..

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리 URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원React컴포넌트 안에 렌더링 로직 + 사이드 이펙트 로직 = 코드 복잡, 읽기 어려움, 관리 어려움React Router (v6.4+ data API : Remix Framework)컴포넌트는 순수하게 렌더링 로직 관리loader 함수는 사이드 이펙트 (서버 요청, 응답 코드 처리)  ⏩ 설치react-router-dom 패키지 설치pnpm add react-router-dom  ☑️ 라우터 생성 & 공급⏩ 컴포넌트 (라우터 공급) import { StrictMode } from 'react';import { ..

📌 싱글 페이지 애플리케이션 (Single-page application, SPA): 단일 HTML 페이지로 구성된 웹 애플리케이션 처음에 한번 페이지를 로드한 후, 새로운 데이터를 요청하거나 페이지 전환을 하더라도 새로고침 없이 동적으로 필요한 데이터만 불러오는 방식사용자가 페이지 사이를 이동할 때 서버에 전체 페이지를 요청하는 것이 아니라, 기존 페이지를 유지한 채 필요한 데이터만 교체브라우저(클라이언트) 측에서 리액트를 사용해 사용자가 요청에 따른 페이지 컴포넌트를 렌더링하여 전통적인 웹 프로그램을 브라우저 단에서 처리할 수 있다. React에서 SPA를 구현할 때 주로 React Router라는 라이브러리를 사용해 라우팅을 처리 AJAX : 페이지를 변경하지 않고 동일한 페이지에서 오로지 자바스..