🤔 리액트 라우터(React Router)란?
단일 페이지인 React.js를 다중 웹 페이지처럼 보이게끔 구현해주는
일종의 React.js의 눈속임을 시켜주는 라이브러리이다.
npm install react-router-dom명령어를 통해서 설치해준 후
App 컴포넌트 내에 import 시켜준다.
사용방법은 간단하다 App 컴포넌트 내에서 라우팅으로 다룰
<Route>로 내부에 어떤 경로로 진입할건지와 경로별 렌더링할 컴포넌트를 지정해주면된다.
Homepage 컴포넌트와 About 컴포넌트를 만들었을 때
Homepage 컴포넌트 내부에 About 컴포넌트의 내용을 렌더링 시켜주고 싶다면?
<Link>컴포넌트를 import 해와서 About 컴포넌트 경로를 넣어 배치시켜주면 된다.
렌더링된 앱을 실행시켜보면 잘 이동되어지는 것을 확인할 수 있다.
동일한 기능을 하는 기능으로 useNavigate 가 있다
커스텀 훅을 생성해 함수 컴포넌트로 만들어주고 이벤트 핸들러로써 설정해주면
Link와 동일하게 작동한다.
함수 내에서 호출을 해줘야 한다면? useNavigate를 이용하고
그럴 필요 없이 바로 이동하게 해주어도 상관이 없다면 Link를 이용해 용도별로 유동적으로 구현을 해주면된다.
개발하는 곰🐻