나디아 성장 일기

📌 react-hot-toast: React에서 사용하는 토스트 메시지 라이브러리  react-hot-toast - The Best React Notifications in Town - react-hot-toastAdd beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.react-hot-toast.com   ✨ 토스트 메시지(Toast Message): 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소토스트처럼 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 자동으로 사라진다. 보통 정보나 작업 결과를 사용자에게 간단하게 알려줄 때 사용한다.    ⏩ 설치pnpm add ..

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

📌 AbortController : 웹 요청을 취소할 수 있는 기능 비동기 작업을 취소할 수 있도록 돕는 기능다양한 비동기 작업을 중단할 때 사용한다.(ex. Fetch API, 네트워크 요청 취소, 타이머 중단, 이벤트 리스너 제거 등)사용: 사용자가 취소하거나 중단할 수 있는 작업 ex 1) 사용자가 파일 다운로드를 시작했지만, 중간에 취소 버튼을 클릭하면 다운로드 요청을 중단 ex 2) 컴포넌트가 사라지거나 페이지가 이동되면 이전에 실행 중이던 네트워크 요청이 더 이상 필요하지 않으므로 중단ex 3) 네트워크 상태가 좋지 않아서 요청이 너무 오래 걸리는 경우, 일정 시간이 지나면 요청을 자동으로 중단  ⏩ 작동 방식 AbortController()는 signal 객체를 생성 ➡︎ 이 signal ..

📌 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 사용 이유..