나디아 성장 일기

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 데이터 가져오기 (Loader)⏩ loader() 함수: 특정 라우트가 렌더링되기 전에 데이터를 비동기적으로 로드하는 데 사용 서버에서 데이터를 가져오거나 비동기 작업을 처리한 후 페이지를 렌더링할 수 있도록 한다loader()는 특정 라우트가 활성화되기 전에 필요한 데이터를 미리 로드한다.➡︎ 페이지가 로드될 때 필요한 데이터가 이미 준비되어 있어 사용자에게 빠르게 콘텐츠를 제공한다. 특징비동기 데이터 로딩: loader()는 비동기 함수를 지원하여, 데이터를 비동기적으로 가져올 수 있다.라우트 기반 데이..

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원  ☑️ 검색엔진최적화(SEO) 설정 ⏩ react-helmet-async 활용: React 애플리케이션에서 동적으로 HTML 를 관리할 수 있게 해주는 라이브러리 리액트의 단점 ➡︎  React는 하나의 index.html을 두고 있기 때문에 페이지 마다 페이지를 설명하는 메타태그를 설정하기 어렵다. ➡︎ SEO가 어렵다. SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 메타 태그, 타이틀, 링크 태그 등을 관리할 때 사용 기존의 react-helmet 라이브러리를 비동기적으로 사용할 수 있도록 개선한 버전..

📌 useReducer(): 복잡한 상태(state) 로직을 처리하는 상태 관리 훅 useState와 유사하지만, 상태(state) 업데이트 로직을 더 명확하게 분리하고 다양한 상태(state) 변화를 처리한다. 현재 상태와 액션을 받아 새로운 상태를 반환하는 리듀서 함수를 사용한다.➡︎ 상태 변화는 액션에 의해 일어나며, 이 액션은 리듀서 함수에 전달된다. useReducer에서 사용하는 리듀서 함수는 순수해야 한다. ➡︎ 사이드 이펙트 코드가 들어가면 안된다. 사용상태(state) 변화가 복잡하고, 여러 가지 액션에 따라 다양한 상태 변경이 필요할 때상태(state)와 관련된 로직을 분리하여 관리하고 싶을 때리덕스(Redux)와 같은 상태 관리 패턴을 작은 컴포넌트 내에서 구현하고 싶을 때  ⏩ ..

📌 useContext(): 상위 컴포넌트에서 제공한 Context 값을 하위 컴포넌트에서 접근할 수 있는 훅상위 컴포넌트에서 ⬇️ 하위 컴포넌트로 데이터를 전달하는 데 사용 prop drilling(여러 단계의 prop 전달)을 피할 수 있다. 사용Context 생성: createContext를 사용하여 Context 객체를 생성Context 제공: Provider를 사용하여 하위 컴포넌트에 값을 제공Context 사용: useContext를 사용하여 Context의 값을 읽어옴   ✅ 사용  1️⃣ createContext(): 새로운 Context 객체를 생성컨텍스트는 기본적으로 데이터를 저장할 수 있는 공간을 만들고, 이 공간을 통해 데이터(상태, 함수 등)를 하위 컴포넌트들에게 전달한다. 상위..

📌 useDebugValue(): React 개발자 도구에 커스텀 훅에 라벨(디버깅 정보)을 추가할 수 있는 훅커스텀 훅에서 훅 내부 상태를 디버깅하는 목적으로 사용 개발 모드에서만 작동하며, 해당 훅을 사용하는 컴포넌트의 상태를 쉽게 파악할 수 있다.➡︎ 개발자 도구에서 해당 훅을 사용하는 컴포넌트를 선택하면, 디버깅 정보를 확인할 수 있다.앱의 성능에 영향을 미치지 않는다.  useDebugValue(value, formatFunction?)매개변수value: React 개발자 도구에 표시하고 싶은 디버깅 정보어떤 타입이든 될 수 있다. formatFunction : value를 인자로 받아 포맷팅된 문자열이나 객체를 반환하는 함수컴포넌트가 검사될 때, React DevTools는 value를 인자..

📌 컴포넌트 렌더링 성능 이슈 & 해결 방법 컴포넌트의 잦은 리-렌더링 이슈 해결 & 렌더링을 효과적으로 관리하기 위한 방법  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 사용 이유..