1. useOutletContext React Router에서 제공하는 훅으로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 공유하거나 기능을 전달하기 위해 사용한다. useOutletContext는 Outlet 컴포넌트의 context 속성을 통해 데이터를 전달 받는다.React Router를 사용한 페이지 내에서, 특정 라우트 계층 구조에서 데이터를 효율적으로 공유하고자 할 때 유용하다. 1-1. 기본 구조와 동작1. 부모 컴포넌트에서 context 설정부모 컴포넌트는 Outlet에 context 속성을 사용해 데이터를 전달한다.import { Outlet } from 'react-router-dom';function Parent() { const sharedData = { user: 'John Do..

1. React Router 의 개념Router에는 여러 종류가 있다. BrowserRouter : 브라우저의 history API를 사용, URL이 깔끔하게 유지HashRouter : URL에 #를 포함, 서버 설정이 필요 없지만 SEO에 불리함MemoryRouter : 메모리에서 라우팅 정보를 유지. 브라우저 히스토리를 사용하지 않는 환경(테스트용 등) 적합1-1. 라우트의 정의path 와 렌더링할 컴포넌트를 정의중첩 라우트를 부모 - 자식 관계 정리import { createBrowserRouter } from 'react-router-dom';const router = createBrowserRouter([ { path: '/', element: , children: [ ..

1. useMemouseMemo는 메모이제이션하여 불필요한 계산을 방지하는 React Hook이다. 즉, 특정 값이 변경되지 않으면 기존 계산 결과를 재사용하도록 하는 기능이라고 볼 수 있다.주요 목적은 무거운 계산이나, 렌더링 중 반복적으로 실행되는 연사을 최소화하여 성능을 향상시키는 것이다.import React, { useMemo } from 'react';const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);import로 useMemo를 가져온다. useMemo(() => {계산식}, [의존성])첫 번째 인자: 함수 -> 계산할 코드를 함수로 작성두 번째 인자: 의존성 배열 -> 배열 안의 값이 변경될 때만 첫..

1. useState단순한 상태 관리에 적합하다.상태를 업데이트하기 위해 새로운 상태값을 직접 설정상태의 형태가 단순(숫자, 문자열, boolean 등)하거나 관리 로직이 복잡하지 않은 경우 사용const [state, setState] = useState(initialValue); 장점간단한 상태를 관리할 수 있다.함수형 업데이트(setState(prev) => newValue)로 이전 상태를 기반으로 업데이트 가능import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>..

1. strictModeReact의 StrictMode는 애플리케이션에서 잠재적인 문제를 발견하기 위한 도구이다. 개발 모드에서만 활성화가 된다. 코드 작성을 하다보고 콘솔을 해보면 두번 실행이 되는 경우가 많다. 이제 이렇게 발생되는 조건을 알아보자.안전하지 않은 생명주기 메서드 예: componentWillMount, componentWillReceiveProps와 같은 메서드이다. 근데 이는 React 16이후로 사용이 권장되지 않는다. 그 이유는 클라스 컴포넌트가 아니라 함수형 컴포넌트를 많이 사용하기 때문이다.Deprecated API 감지오래된 API 사용을 경고한다.부작용 검사React 18부터 StrictMode는 개발모드에서 부작용을 감지하기 위해 헨더링을 두 번 실행한다.예를 들어, 함..

1. cleanup 함수란?useEffect에서 반환된 함수는 클린업 함수로, 다음과 같은 상황에서 호출된다.1. 컴포넌트가 언마운트 될 때컴포넌트가 DOM에서 제거되기 전에 정리 작업이 필요하다예: 타이머, 이벤트 리스너, 네트워크 요청 취소 등2. useEffect 가 재실행되기 직전의존성 배열 값이 변경될 때, 새 작업을 실행하기 전에 기존 작업을 정리한다.예제 코드 useEffect(() => { console.log(step, 'setup 함수 호출'); const timer = setInterval(() => { console.log(step, new Date()); }, 1000); return () => { console.log(step, 'clea..