Per ardua ad astra.

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

URL의 파리미터(Parameter) 값 가져오기들어가며리액트(React.js)에서 URL의 파라미터(Parameter) 값을 가져오는 방법을 정리해본다. 파라미터(Parameter)개념URL 경로의 일부분으로, 주로 특정 리소스를 식별하는 데 사용된다.RESTful API 설계에서 흔히 사용되며, 리소스의 고유 식별자를 나타낸다.URL 파라미터를 사용하면 동적인 경로를 생성할 수 있어, 다양한 리소스에 대해 동일한 컴포넌트를 재사용할 수 있다. 종류종류설명경로 파라미터(Path Parameter)- 특정 리소스를 식별하는 데 사용- 예: /users/:userId쿼리 파라미터(Query Parameter)- URL의 ? 뒤에 위치하며, 키-값 쌍으로 다양한 옵션을 전달한다.- 예) ?sea..

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

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() { /..

defer() (React Router)들어가며리액트 라우터(React Router)에서 제공하는 defer()에 대해 정리해본다. defer()개념리액트 라우터(React Router)에서 제공하는 기능데이터를 모두 불러오기 전에 페이지 일부를 먼저 렌더링하고, 데이터가 도착하면 나머지 부분을 렌더링할 수 있도록 해준다.페이지 로딩 속도를 향상시키고, 사용자 경험(UX)을 개선하는 데 도움을 준다. 주요 특징비동기 데이터 로딩defer는 비동기 데이터 로딩을 처리하는 데 사용된다.데이터를 가져오는 동안 일부 페이지 콘텐츠를 먼저 렌더링하고, 데이터가 도착하면 나머지 콘텐츠를 렌더링한다.빠른 페이지 렌더링모든 데이터를 기다리지 않고도 페이지 일부를 즉시 렌더링할 수 있어 페이지 로딩 시간을 단축한..

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-Typejson() 함수는 반환된 응답의 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..