Router란? 리액트 컴포넌트로 페이지를 나누고 이동하게 해주는 라이브러리이다. 우리가 리액트를 사용하다보면 router, routes, route, link 이렇게 네가지 컴포넌트가 있는걸 볼 수 있었다. 그럼 각각 어떤 역할을 하는지 알아보자. Router 라우터는 리액트 라우터에서 사용하는 데이터들을 모두 가지고 있는 컴포넌트다. (현재주소나, 페이지기록을 가지고 있음) 이게 없으면 리액트 라우터를 쓸 수 없다.(중요!!) 그래서 리액트 라우터에서 제공하는 기능을 사용하려면 반드시 라우터컴포넌트 안에서 사용해야한다. 보통은 최상위 컴포넌트로 감싸고 사용하는데 이렇게하면 프로젝트 전체에서 리액트 라우터를 쓸 수 있기때문이다. 📌예시 import { BrowserRoute } from "react-r..

NavLink => NavLink는 nav에서 사용하는 링크로 기존의 link와의 차이점은 스타일프롭으로 함수를 지정할 수 있다는 것! 간단하게 웹에서 메뉴를 클릭하면 그 밑에 'active' 효과가 나타나는걸 우리는 자주 볼 수 있다. style 작업을 해줘도 되지만 .... NavLink를 써보면? 카탈로그 커뮤니티 navlink로 감싸고 스타일 함수를 만들어서 안에다가 넣을 수도 있다 const getLinkStyle = ({ isActive }) => { return { textDecoration: isActive ? "underline" : undefined, }; }; 간단하게 사용가능! NavLink는 스타일프롭으로 함수를 지정할 수 있다는 것!

link 태그 사용자가 클릭해서 페이지를 이동하도록 할 때 사용하고 하이퍼링크 텍스트나 페이지를 이동하는 버튼, 이미지 등에 사용하면 되겠죠? 대부분의 경우 Link 만으로도 충분하다. 웹 앱을 만들고 싶을때, 웹 페이지 안에서 스무스하게 작동시키고 싶을때(클릭시 바로 이동해야 할 때) ex)nav bar, aside menu등, Navigate 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다. (리다이렉트) ex) 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우 useNavigate 훅 const navigate = useNavigate(); const ..