나디아 성장 일기

📌 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)이 필요한 경우반복되는 로직이 있을 때..