[TIL] 23.05.10

Minkyu Shin·2023년 5월 10일

React TIL

TIL

목록 보기

26/44

오늘의 나는 무엇을 잘했을까?

시간에 맞추어 잘 출석했다. 앞으로도 시간에 맞춰 출석을 할 수 있도록 해야겠다. 아침에 조금만 더 일찍 준비하고, 일찍 자기 위해 노력하려 한다.

오늘의 나는 무엇을 배웠을까?

React Router

라우팅(Routing)이란 웹 애플리케이션에서 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 말한다. 여러 페이지로 구성된 웹 애플리케이션이 있을 때 페이지별로 컴포넌트를 구분해 가며 프로젝트를 관리하기 위해서 라우팅이 필요하다.

React Router(이하 리액트 라우터)는 리액트에서 라우팅 시스템을 구축하기 위해 사용하는 라이브러리로써, 컴포넌트 기반으로 라우팅 시스템을 구축할 수 있게 도와준다. 리액트 라우터를 활용하면 손쉽게 SPA 구현이 가능해진다.

React Router 사용하기 (1)

리액트 라우터를 사용하기 위해서는 리액트 프로젝트 디렉토리에서 리액트 라우터 라이브러리를 설치해 주어야 한다.

npm install react-router-dom

프로젝트에 라우터 적용하기

라이브러리가 정상적으로 설치되면, 프로젝트에 라우터를 적용해주면 된다. 이 때 프로젝트의 가장 최상단 js 파일에서 <BrowserRouter> 컴포넌트로 자식 컴포넌트를 감싸 주면 자식 컴포넌트들에서 라우팅 기능을 사용할 수 있다.

e.g. index.jsx

ReactDom.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

페이지 컴포넌트 만들기

리액트 라우터를 사용하여 여러 페이지로 구성된 웹 애플리케이션을 만들기 위해서는 페이지로 사용할 컴포넌트를 만들어 주면 된다. 리액트를 사용하며 만들었던 컴포넌트와 코드 작성 방법은 동일하다.

가령 Home 이라는 페이지 컴포넌트를 만든다고 하면

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  )
}

와 같이 만들어주면 된다.
꼭 그럴 필요는 없지만, pages라는 디렉토리를 만들어 페이지 컴포넌트들을 모아 두면 관리하기 좀 더 용이할 것 같다는 생각을 해 보았다.

Route 컴포넌트 사용하기

주소 경로에 따라 원하는 컴포넌트를 보여주기 위해서는 Route 컴포넌트를 활용해야 한다.
Route 컴포넌트를 사용하는 방법은 아래와 같다.

<Route path="주소" element={보여줄 컴포넌트 jsx로 작성} />

앞서 만든 Home 컴포넌트를 사용하는 예시를 보자면

import { Route } from "react-route-dom";
import Home from "경로";

<Route path="/" element={<Home />} />

하지만 정확한 사용법을 말하자면 Route 컴포넌트는 항상 Routes 컴포넌트 하위에 들어가야 한다. 이 예시 코드는 다음과 같다.

import { Routes, Route } from "react-router-dom";
import Home from "경로";
import Something from "경로";

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/something" element={<Something />} />
    </Routes>
  )
}

Route 컴포넌트는 항상 Routes 컴포넌트 하위에 배치되어야 함을 명심하자

Link 컴포넌트 사용하기

우리가 HTML에서 링크를 a 태그를 사용하여 표현했다. 하지만 a 태그를 통해 링크를 구현하면 브라우저가 페이지를 새로 불러오기 때문에 리액트에서는 a 태그를 바로 사용하지 않는다.

대신, Link 컴포넌트를 활용하여 다른 페이지로 이동하는 링크를 구현한다. Link 컴포넌트도 a 태그를 활용하지만 페이지를 새로 불러오는 것을 막고 History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다고 한다.

Link 컴포넌트의 사용 방법은 다음과 같다.

<Link to="경로">링크명</Link>

이전에 만들어 둔 Home 페이지에서 Something 페이지로 이동할 수 있도록 Link 컴포넌트를 사용한다면 Home 컴포넌트는 다음과 같이 바뀔 것이다.

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

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/something">Something</Link>
    </div>
  )
}

오늘의 나는 어떤 어려움이 있었을까?

오늘 리액트 라우터 파트의 강의를 수강했다. 기존처럼 강의를 들으며 정리를 같이 하려 했는데 실습을 함께 진행하다 보니 정리에 좀 소홀해서 배운 내용을 잘 정리해 놓지 못했다. 내일 오전에 나머지 내용을 추가해서 정리해 봐야겠다.

일찍 일어나서 잘 출석한 것은 좋았는데, 점심을 먹고 나니 졸려서 눈이 막 감겼다. 제 정신이 아닌 상태로 강의 일부를 들었던 것 같은데, 앞으로는 너무 피곤하면 잠깐 눈을 붙이고 일어나서 멀쩡할 때 공부하는 것이 더 나을 것 같다는 생각을 했다. 들었던 부분을 다시 들어야 하는 불상사가 발생한다.