[008] 리액트 (React) 배우기 - Router (라우터 사용)
2023. 2. 28. 14:59ㆍ프론트엔드개발/React
반응형
안녕하세요~ totally 개발자입니다.
Router
오늘 살펴볼 부분은 Router입니다. 라우터란 여러 페이지가 있을 때 각 페이지로 갈 수 있도록 도와주는 기능입니다. Main.js, About.js, Contact.js 3개의 컴포넌트가 있을 때 이 3개의 페이지(컴포넌트)로 라우팅해보도록 하겠습니다.
Step 1: 먼저 component 폴더 내에 About.js, Contact.js, Main.js 파일을 각각 만들어줍니다.
Step 2: App.js에 다음처럼 입력해줍니다. 중요한 것은 <BrowserRouter> 태그로 감싸주신 뒤 <Routes></Routes> 안에 각 <Route> 태그를 만들어주셔서 path와 element 부분에 함수 이름을 지정하면 됩니다.
Step 3: 만약에 react-router-dom이 설치되어 있지 않다면 Terminal 열어주셔서 sudo npm install react-router-dom 입력 후 설치하시면 됩니다.
Step 4: npm run start 해주셔서 실행해본 모습입니다. 아직 링크 메뉴 버튼을 만들지 않았기 때문에 수동으로 주소창에 /about, /contact를 입력해서 테스트해보시면 됩니다.
반응형
'프론트엔드개발 > React' 카테고리의 다른 글
[010] 리액트 (React) 배우기 - useRef Hook (DOM 요소 접근) 사용 (0) | 2023.02.28 |
---|---|
[009] 리액트 (React) 배우기 - Navbar 만들기 (Link 사용) (0) | 2023.02.28 |
[007] 리액트 (React) 배우기 - List (리스트) + map 활용하기 (0) | 2023.02.25 |
[006] 리액트 (React) 배우기 - 함수형 컴포넌트 useEffect Hook(훅) 사용, 클래스형 컴포넌트 생명주기 이해 (0) | 2023.02.24 |
[005] 리액트 (React) 배우기 - 함수형 컴포넌트 useState Hook(훅) (상태 업데이트) (0) | 2023.02.23 |