React TIL 04

2021년 7월 9일에 작성된 문서 2번 입니다.
React 배운 내용을 정리했습니다.

Routing

SPA는 하나의 페이지인데, 여러 화면이 존재해서 화면 따라 주소도 달라진다.

• 라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주는 과정 (경로에 따라 변경)

• React SPA에서는 라우팅을 위해 React Router 라는 라이브러리를 쓴다.

React Router

React Router의 주요 컴포넌트

<BrowerRouter> (Router)
<Swtich> (Route Matchers)
<Route> (Route Matchers)
<Link> (Route Changers)

React Router의 주요 컴포넌트는 크게 3가지로 나눈다.

• 라우터 역할 : BrowserRouter
  • 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할.
  • ReactDOM의 렌더 단계인 index.js 에 넣어서 활용할 수도 있다.
  • BrowserRouter가 상위에 작성되어 있어야 Route 컴포넌트를 사용할 수 있다.

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.querySelector('#root'));

• 경로를 매칭 : Switch, Route
  • <Switch> :
    • 여러 <Route>를 감싸 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시킨다.
    • <Switch> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.
  • <Route> :
    • path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정한다.
    • Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동.
      

Route 컴포넌트의 exact 라는 것은 언제 쓰는건가요?
React router의 특성상 exact속성이 없으면 해당 경로("/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여줍니다. exact는 주어진 경로와 정확히 일치해야만 설정한 <Route> 컴포넌트를 보여주는 역할을 합니다.

• 경로를 변경 : Link
  • 경로를 연결해주는 역할을 하는 컴포넌트다.
  • 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지해 HTML5 History API 를 이용해 페이지의 주소만 변경해 준다.
  • ReactDOM으로 렌더링을 시키면 <Link> 컴포넌트는 <a> 태그로 바뀌는 모습을 볼 수 있다.

    React Router 에서 <a> 태그가 아닌 <Link>를 사용하는 이유가 있나요? <a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시키는 새로고침 현상이 일어나게 되죠. 하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장되어있기 때문에 SPA를 구현할 수 있습니다.

이 컴포넌트들을 사용하기 위해서 React Router 라이브러리에서 불러와야한다.

import {BrowerRouter, Switch, Route, Link} 
from "react-router-dom";

• Import는 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)과 비슷하게 이용된다.

React Router 환경 세팅

create-react-app으로 React 프로젝트 환경을 만들 수 있습니다. 그 환경에 React Router 라이브러리도 설치할 수 있죠! npm 명령어를 통해 간단하게 설치할 수 있습니다.

1. React Router 라이브러리 설치.

// simpleroute 폴더에 React App 설치
$ npx create-react-app simpleroute
$ cd simpleroute // simpleroute 폴더로 이동

// react-router 라이브러리 설치
$ npm install react-router-dom

2. App.js로 react-router 컴포넌트 가져오기

import React from "react";
import {BrowerRouter, Switch, Route, Link} from "react-router-dom";

export default function App(){
	return (...)
}

Written with StackEdit.