16일차

16일차는 꽤나 많은 걸 배웠다. 이번 주부터는 계속해서 새로운 내용을 배우기 때문에 집중해서 공부를 해야 한다.

이번에는 페이지라는 개념에 있어서 필요한 것들을 배웠다. 페이지의 이동 경로(URL)를 연결해주는 Router, 그리고 그와 관련한 것들 배웠다. URL을 관리한다는 건 매우 중요한 내용 중에 하나기 때문에 이번 내용 또한 복습하는 차원에서 이렇게 기록을 해본다.

---

react-router-dom

react-router-dom이란, 클라우드 사이드에서 랜더링을 해줄 수 있게 해주는 패키지다. React Router의 기능을 DOM 환경에 맞게 구성하고 브라우저에서 사용되는 다양한 컴포넌트와 훅 함수를 제공해줌으로써 쉽게 랜더링이 가능하다.

npm install react-router-dom

터미널에서 이렇게 설치할 수 있다. 이 패키지에는 다양한 종류의 훅 함수들이 존재하는데, 이를 하나하나 알아보도록 하겠다.

라우터

Router는 클라이언트 사이드에서 라우팅을 관리하는 도구다. URL 경로와 연결된 컴포넌트를 매핑하고, 사용자가 애플리케이션 내에서 다른 경로로 이동할 때 해당 컴포넌트를 렌더링하는 역할을 한다.

예시

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

import Home from "pages/Home";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
      </Routes>
    </Router>
  );
};

export default App;

사용할 때의 예시는 위와 같다. 크게 볼 부분은, import와 Router, Routes, Route 이렇게 보면 된다.

import 부분은 총 2부분으로 나눌 수 있는데, BrowsweRouter은 브라우저의 URL 경로를 관리하고, 애플리케이션의 라우팅을 설정하고 제어하는 역할을 수행한다고 보면 된다.

그리고 as Router에서 as는 (alias)의 약자로, BrowserRouter가 길기 때문에 Router라는 약자로 사용하도록 설정한 것이다. 그리고 나머지는 그냥 Routes, Route 컴포넌트를 가져온 것이다.

결과

예시가 좋지는 않다. 그러나 이렇게 path를 설정하여 클릭한 화면에 나온다.

추가 상식

경로로 이동할 때 a태그를 사용하지 않는다. 그 이유는 a태그를 사용할 경우, 컴포넌트의 상태를 잃기 때문이다.

useNavigate, useParams, Link

useNavigate

useNavigate란, 프로그래밍적으로 라우터를 조작하고 경로를 변경할 수 있게 해준다. 간단하게 이전 페이지로 이동 같은 간단한 조작을 가능하게 해준다.

예시

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

const Nav = () => {
	return (
		<div onClick={() => navigate(-1)}>뒤로가기</div>   
    );
}

아주 간단한 useNavigate 예시다. div의 뒤로가기 버튼을 누르면 이전 페이지로 이동한다.

useParams

useParams는 현재 경로의 경로 매개변수를 추출하는 데 사용되는 훅 함수다. 경로 매개변수를 객체로 받아와 사용할 수 있다. 그래서 매우 편하게 경로의 매개변수를 이용할 수 있다.

예시

import { useParams } from "react-router-dom";

const {username} = useParams();
const Name = () => {
	return (
	    <h3>{username}은 무엇을 하는 사람일까요?</h3>
    );
}

URL 경로에서 username이라는 이름의 매개변수를 추출해서 객체처럼 사용할 수 있다.

Link

Link는 클릭 이벤트에 의해 경로를 변경하는 링크를 생성하는 컴포넌트다. 경로를 이동할 때 a태그 대신에 간단하게 사용할 수 있다.

예시

import { Link } from 'react-router-dom';

const Nav = () => {
	return (
      <ul>
        <li>
        	<Link to="/">HOME</Link>
        </li>
        <li>
        	<Link to="/about">ABOUT</Link>
        </li>
      </ul>
    );
}

Link는 이와 같이 사용한다. Link 태그와 to 속성을 사용해서 li태그의 HOME을 누르면 / 경로로 이동한다. 경로를 이동하는데 매우 쉽고 유용하게 사용할 수 있는 컴포넌트다.

---

실습

영화 웹 만들기.

이번 실습은 팀으로 영화 웹을 만드는 실습을 했다. 이 실습에서 중요한 것은 API를 통해서 데이터를 잘 가져오는 것과 경로 설정을 통해 상세페이지를 잘 가져오는 것이다.

git: https://github.com/leeyulgok/React-BootCamp-Team2/tree/yulgok

코드는 위의 gitHub에 올려두었다.

결과(1차)

현재까지 만든 웹 페이지의 결과는 아래와 같다. css를 넣지 않아서 많이 이상하기는 하지만 핵심을 잘 챙겨서 괜찮다.

첫 번째 사진은 API를 통해서 영화 데이터를 가져온 페이지다. 전체적인 json 데이터를 가져오고, 그 후 필요한 것만 페이지로 불렀다.

두 번째 사진은 상세페이지 사진이다. 아직 하다가 말아서 볼 건 없지만, 여기도 핵심은 영화의 id를 가져왔다는 점이다. 이 아이디에 맞는 데이터를 가져와서 추가하면 깔끔하게 될 것 같다.

---

정리하기

16일차는 경로 설정과 관련하게 많은 것들을 공부했다. 어렵다고는 얘기 못하지만, 자주 사용될 기능이기 때문에 쉽다고 생각하지말고 계속 연습을 통해 바로바로 튀어나올 수 있도록 연습해야겠다.

매우 재미있는 시간이었고, 배운 내용으로 내 개인페이지도 이쁘게 꾸며야겠다.

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프