리액트 react-router-dom 기능들 정리

웹페이지 현제 path에서 특정 웹 path로 이동하기 위한 기능으로 보임.

AS-IS

TO-BE

from "react" 기능들 정리

import {Suspense, lazy } from "react"; 로 태그했지만, Suspense는 <>로 쓰고, lazy()는 함수처럼 호출하네.. 규칙이 있을까?

react-router-dom에 useNavigate랑 Navigate가 있는데 차이가 뭘까? 함수로 쓰냐 꺽새로 쓰냐 <> 차이인가?

1. <Suspencse>

2. lazy()

=> 웹 애플리케이션을 개발하다 보면 데이터 로딩 속도로 문제 생기는 경우가 발생한다.

이런 상황에서 React Suspense를 활용하면 데이터 로딩 상태를 보다 세련되게 처리하고, 사용자에게 더 나은 경험을 제공할 수 있다.

React Suspense는 컴포넌트의 렌더링을 일시 중지하고 데이터 로딩을 기다릴 수 있게 해주는 React의 기능이다.

React 16.6부터 도입된 기능으로, 컴포넌트가 렌더링 되기 전에 데이터 로딩을 기다릴 수 있게 해준다.

Suspense의 핵심 개념으로는 'lazy'와 'fallback'이 있다.

lazy는 동적 임포트를 통해 컴포넌트를 필요한 시점에 로딩하는 기능이다.

이를 통해 초기 번들 크기를 줄이고 초기 로딩 속도를 개선할 수 있다.

fallback을 통한 로딩 UI 제공

fallback은 컴포넌트가 로딩 중일 때 보여줄 'UI를 설정하는 prop'이다.

fallback으로는 로딩 스피너, 스켈레톤 UI 등을 활용할 수 있다.

이를 통해 사용자에게 콘텐츠가 로딩 중임을 알리고, 현재 애플리케이션이 멈춘 게 아니라 원활하게 동작하고 있음을 인식시킬 수 있다.

React Suspense: 리액트 서스펜스를 사용하는 이유와 사용법 총정리 I 이랜서 블로그

컴포넌트의 렌더링을 일시 중지하고 데이터 로딩을 기다릴 수 있게 해주는 React의 기능으로 데이터 로딩 중에도 자연스러운 사용자 경험을 유도할 수 있도록 도와주는 react suspense의 사용하는 이

www.elancer.co.kr

--------------------

리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶다면 useParams 이라는 훅을 사용하면 된다.

라우터를 사용하고 있다는 가정 하에 아래처럼 사용하면 된다.

번외로 파라미터가 아닌 현재 페이지의 Pathname을 가져오려면 useLocation()을 사용해야 한다.

ex : URL/user/1 - user는 pathname, 1은 parameter

ex : http://localhost:3001/survey/abc123/3

현재 페이지의 pathname을 가져오려면 useLocation을 사용해야 한다.

ex : URL/user/1 - user는 pathname, 1은 parameter

브라우저 라우터는 라우터에 대한 환경 설정이라고 생각하면 된다.

문자메일의 블로그