Per ardua ad astra.

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

라우팅 관련 기능들 정리 (React Router) : useNavigate, useNavigation, redirect, useLocation, useParams, useHistory, Navigate들어가며리액트(React.js)에서 라우팅을 위해 사용되는 관련 기능들에 대해 간단하게 정리해본다.페이지 이동 및 라우팅을 위해 리액트 라우터(React Router)의 여러 훅과 컴포넌트, 함수들을 사용할 수 있다. ① useNavigate()개념리액트 라우터(React Router) v6 에서 제공하는 훅프로그래밍적으로 다른 경로로 이동하기 위해 사용된다.컴포넌트 내에서 버튼 클릭, 이벤트 발생 시 특정 페이지로 이동할 때 사용한다. 특징@push@와 @replace@를 설정할 수 있어 히스토리에 추가..

폼 데이터 처리하기 (React, React Router)들어가며리액트(React)에서 폼(@@) 데이터를 처리하는 방법을 정리해본다. 폼(Form, @@)개념HTML에서 사용자 입력 데이터를 수집하고 서버로 전송하기 위한 요소로그인, 회원가입, 검색 등 사용자 입력이 필요한 기능을 구현할 때 사용된다. Name: Email: Submit 특징@@ 요소에서 @method@ 속성을 지정하지 않을 경우, 기본적으로 @GET@ 요청이 수행된다.이때, @@ 요소 안의 @@요소의 값을 URL의 쿼리 문자열에 포함하여 서버로 전송한다.속성의 값을 @POST@로 지정할 경우, 데이터를 본문에 포함하여 서버로 전송한다.@@ 요소의 @action@ 속성의 값에 폼을 제출할 때 데이터를 보낼 서버의 URL을 ..