Per ardua ad astra.

컴포넌트와 컴포넌트 비교 (React Router)들어가며리액트 라우터(React Router)에서 @@ 컴포넌트와 @@ 컴포넌트의 차이점에 대해 정리해본다.  컴포넌트개념리액트 라우터에서 제공하는 가장 기본적인 링크(Link) 컴포넌트특정 경로로 이동할 수 있는 내비게이션 링크를 생성한다.HTML의 @@ 태그와 유사하지만, 페이지 새로고침 없이 SPA(Single Page Application) 내에서 라우팅을 처리한다. 특징페이지를 새로 고침하지 않고, 클라이언트 측 라우팅을 수행한다.단순한 라우팅에 적합하다.선택된 상태에 따른 스타일링 기능은 없다. 사용 예시 코드import { Link } from "react-router-dom";function App() { return ( ..

리액트 라우터(React Router)들어가며리액트(React.js)에서 라우팅을 할 때 많이 사용하는 리액트 라우터(React Router) 라이브러리에 대해 정리해본다.v6을 기준으로 정리하였다. 리액트 라우터(React Router)개념리액트 애플리케이션에서 클라이언트 사이드 라우팅을 처리하기 위한 라이브러리리액트 라우터를 사용하면, 사용자가 페이지를 전환할 때 전체 페이지를 새로고침하지 않고도 URL에 따라 서로 다른 컴포넌트를 렌더링할 수 있다. 구성 요소BrowserRouterHTML5의 History API를 사용하여 URL을 관리한다.주로 애플리케이션의 최상위 컴포넌트로 사용된다. Routes각 경로에 대한 라우트를 정의하는 컨테이너하나 이상의 @Route@를 자식으로 가질 수 있다. Ro..

지연 로딩(Lazy Loading)들어가며리액트(React.js)에서 애플리케이션을 배포하기 전에 코드 최적화 작업을 해주어야 하는데, 이때 지연 로딩(Lazy Loading)을 활용할 수 있다.지연 로딩(Lazy Loading)이 무엇인지 간단히 정리해본다. 지연 로딩(Lazy Loading)개념필요한 시점에 특정 컴포넌트나 모듈을 로드하여 초기 로딩 시간을 줄이고 애플리케이션의 성능을 향상시키는 기술이 방법을 사용하면 초기 로딩 시 불필요한 코드가 로드되지 않으며, 사용자 경험을 개선할 수 있다.  기본적인 사용 방법@React.lazy@와 @Suspense@를 사용하면 컴포넌트를 동적으로 @import@하고 로딩이 완료될 때까지 대체 UI(fallback)를 표시할 수 있다. ① 컴포넌트 동적 im..

useSearchParams 훅 (React Router)들어가며리액트 라우터(React Router)에서 제공하는 @useSearchParams@ 훅에 대해 정리해본다. useSearchParams개념리액트 라우터(React Router)를 사용하여 URL의 쿼리 파라미터를 읽고 설정하는 데 유용한 도구이 훅을 사용하면 컴포넌트가 URL의 쿼리 스트링을 쉽게 접근하고 조작할 수 있다.React Router v6에서 도입되었고, 기존의 @useLocation@과 @useHistory@ 훅을 결합한 기능을 제공한다. 사용법import React from 'react';import { useSearchParams } from 'react-router-dom';function MyComponent() { /..

useFetcher 훅 (React Router)들어가묘리액트 라우터(React Router)에서 제공하는 @useFetcher()@ 훅에 대해 정리해본다. useFetcher개념리액트 라우터(React Router)에서 페이지 전환 없이 데이터 로딩이나 액션을 처리할 수 있게 도와주는 훅(Hook)주로 폼 제출이나 데이터 페칭을 백그라운드에서 처리하고, 사용자에게 시각적 전환 없이 결과를 보여줘야 하는 경우에 사용하면 유용하다. 주요 기능데이터 로딩 및 액션 트리거로딩 상태를 관리하고, 데이터를 비동기적으로 가져오거나 서버에 데이터를 제출할 수 있다.페이지 전환 없음.페이지 전환 없이 데이터를 가져오거나 제출할 수 있으므로, 사용자 경험이 보다 매끄럽다.상태 관리현재 로딩 상태와 로딩 완료 후 데이터를..

json() 유틸리티 함수 (React Router)들어가며리액트 라우터(React Router)에서 제공하는 @json()@ 유틸리티 함수에 대해 정리해본다. json()개념리액트 라우터(React Router)에서 제공하는 함수React Router v6.4에서 추가된 유틸리티 함수주로 라우터 핸들러에서 사용되며, JSON 형식의 데이터를 응답(Response)으로 반환한다. 특징자동 설정된 Content-Type@json()@ 함수는 반환된 응답의 @Content-Type@ 헤더를 @application/json@으로 자동으로 설정한다.간편한 사용JSON 형식의 데이터를 반환하는데 필요한 코드를 간소화하여, 개발자가 보다 직관적이고 간편하게 사용할 수 있게 한다.상태(Status) 코드 설정 가능@..

useRouterError 훅들어가며리액트 라우터(React Router)의 @useRouterError@ 훅에 대해 정리해본다. useRouterError 훅개념리액트 라우터 라이브러리(@react-router-dom@)에서 제공하는 훅라우트 처리 중 발생한 에러를 잡아서 처리하는 데 사용된다.주로 오류 경계(Error Boundary)와 함께 사용되어, 라우트 내에서 발생하는 오류를 처리하고 사용자에게 적절한 피드백을 제공하는데 사용된다. 주요 기능오류 감지: 라우트 컴포넌트에서 발생하는 오류를 감지할 수 있다.에러 핸들링: 감지된 오류를 사용자 정의 에러 메시지나 컴포넌트로 렌더링할 수 있다.오류 정보 제공: 오류 객체를 반환하여 오류 메시지, 스택 트레이스 등을 활용할 수 있다. 사용 예제예제 1..

React Router의 loader 속성들어가며리액트 라우터(@react-router-dom@)의 @loader@ 속성에 대해 정리해본다. React Router의 @loader@ 속성React Router Version 6 부터 사용할 수 있다.컴포넌트가 랜더링되기 전에 데이터를 가져올 수 있다.로더 함수에서 반환된 데이터는 자동으로 해당 컴포넌트에서 사용할 수 있게 된다.로더는 함수로 정의되며, 해당 함수에서 데이터를 가져와 컴포넌트에 전달한다.로더 함수를 사용하면 컴포넌트가 렌더링되기 전에 데이터를 가져올 수 있어, 컴포넌트가 초기 로딩 상태를 표시하지 않고 바로 데이터를 렌더링할 수 있다.따라서 더 나은 사용자 경험을 제공할 수 있다. 예제 코드import { RouterProvider, cre..

라우터 설정 방법 (React Route)들어가며React Router(@react-router-dom@)을 이용하여 라우터를 설정하는 방법을 정리해본다. 방법패키지 설치하기@react-router-dom@ 패키지를 설치하려면 터미널에 아래 명령을 실행한다.$ npm install react-router-dom # yarn add react-router-dom 방법 1@createBrowserRouter@를 이용하는 방법이다.import { createBrowserRouter, RouterProvider,} from "react-router-dom";import HomePage from "./pages/Home";import ProductsPage from "./pages/Products";co..