나만의 작은 코딩

React-router는 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다. 이때 사용하는 유용한 hook과 component들을 정리해보자 사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있게 해주는 요소이다. 원래 웹페이지 에서는 링크를 보여줄 때 태그를 사용하지만 a태그는 클릭시 페이지를 불러오기 때문에 사용하지 않는다. 컴포넌트는 생김새는 태그를 사용하지만 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다. import { Link } from "react-router-dom"; 해당 컴포넌트에 import를 해주고 링크명 단순히 클릭하면 바로 페이지를 이동할 때는 Link를 써주면 편하다 하지만 조건문이 들어가야 하거나 함수 안..

1. 라우팅이란? 지금까지는 단일 페이지의 앱을 만들었다. 하지만 우리가 아는 대부분의 웹/앱은 여러 페이지가 있고 페이지를 이동할 수 있다. React는 SPA(Single Page Application)방식으로 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. 즉 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에 내용을 바꿔치기 해주는 라이브러리 라고 볼 수 있다. 2. 리액트 라우터(React Router) 1) 종류 사용자가 입력한 주소를 감지하는 역할, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. ex) BrowserRouter, HashRouter - Bro..