[fastcampus] Ch4. React Router (1)

productuidev·2022년 3월 7일
개발공부리액트패스트캠퍼스프론트엔드개발
0

React Study

목록 보기
5/52
post-thumbnail

패스트캠퍼스 한 번에 끝내는 프론트엔드 개발(Online) 강의 정리

Ch.4 React Router (1)

1. React의 라우팅 이해하기

(네트워크 개념에서의) 라우팅

  • 라우트(route) : 경로 (출발지/목적지)
  • 라우팅(routing) : 경로를 찾아가게 하는 과정
  • 라우팅 프로토콜(routing protocol) : 경로를 찾아주는 규칙을 사용

라우트는 라우팅 프로토콜에서 만들어진 것이고,
라우팅에 의한 결과가 라우트가 된다.
따라서, 라우팅은 목적에 따라 효율적인 라우팅 프로토콜을 선택하는 것이다.
출처 - https://m.blog.naver.com/ljsun4336/220544726584

SPA 라우팅 과정

  • SSR(Server Side Rendering) : 해당 URL에 대한 내용을 서버로부터 받아옴
  • SPA(Single Page Application) : 서버로부터 하나의 큰 애플리케이션(전체 묶음)을 받아온 후 브라우저(클라이언트)에서 어떤 걸 보여줄지 결정함
  1. 브라우저에서 최초에 '/' 경로로 요청을 하면,
  2. React Web App 을 내려줍니다.
  3. 내려받은 React App 에서 '/' 경로에 맞는 컴포넌트를 보여줍니다.
  4. React App 에서 다른 페이지로 이동하는 동작을 수행하면,
  5. 새로운 경로에 맞는 컴포넌트를 보여줍니다.

싱글 페이지 애플리케이션은 기술적으로는 한 페이지만 존재하는 것이지만, 사용자가 경험하기에는 여러 페이지가 존재하는 것 처럼 느낄 수 있습니다. 리액트 라우터와 같은 라우팅 시스템은 사용자의 브라우저 주소창의 경로에 따라 알맞는 페이지를 보여주는데요, 이후 링크를 눌러서 다른 페이지로 이동하게 될 때 서버에 다른 페이지의 html을 새로 요청하는 것이 아니라, 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존에 페이지에 띄웠던 웹 애플리케이션을 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주게 됩니다.
출처 - https://velog.io/@velopert/react-router-v6-tutorial

react-rounter-dom

  • 가장 대표적인 라우팅 패키지
  • CRA에 기본 내장된 패키지 아님
  • react-rounter-dom은 facebook 공식 패키지 아님
  • https://reactrouter.com/

    npm i react-router-dom

간단한 형태의 페이지 분할 예시

1) 특정 경로에서 보여줄 컴포넌트를 준비

'/' => Home 컴포넌트
'/profile' => Profile 컴포넌트
'/about' => About 컴포넌트

2) src/pages/Home.jsx

export default function Home() {
	 return <div>Home 페이지 입니다.</div>;
}

3) src/pages/Profile.jsx

export default function Profile() {
	 return <div>Profile 페이지 입니다.</div>;
}

4) src/pages/About.jsx

export default function About() {
	 return <div>Home 페이지 입니다.</div>;
}

5) src/App.js

import { BrowserRouter, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
	return (
		<BrowserRouter>
			<Route path="/" component={Home} />
			<Route path="/profile" component={Profile}  />
			<Route path="/about" componen{About} />
		</BrowserRouter>
	);

}

export default App;
  • Route 컴포넌트에 경로(path)와 컴포넌트(component)를 설정하여 나열해줍니다.
  • BrowserRouter로 Route들을 감싸줍니다.
  • 브라우저에서 요청한 경로에 Route의 path가 들어있으면 해당 component를 보여줍니다.
    (리액트 매칭 알고리즘)

localhost:3000/
localhost:3000/profile
localhost:3000/about

<Route path="/" exact component={Home} />

path=주소규칙 component=보여줄 컴포넌트 jsx

exact를 추가하면 완전히 똑같은 path와 URL일 경우에만 보여주는 매칭 방식으로 변경되게 됨.
만약 어떤 경로가 추가되는데 /profile의 하위에 있다고 할 때,
exact 처리를 하지 않으면 두개가 동시에 뜨는 결과가 나올 수 있음.

2. Dynamic 라우팅 (1)

동적 라우팅의 필요성

개발을 하다보면 우리는 이 URL을 고정적으로 하지 않고,
동적으로 처리해서 어떤 값을 받아와서 컴포넌트에서 보여준다든가
그 값을 이용해 어떤 로직으로 벌린다든가 이런 일을 하게되는 경우가 있음

동적 라우팅 예시 1

localhost:3000/profile/1 (특정 ID값 받아서 컴포넌트에 표현)

1) src/App.js

import { BrowserRouter, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
	return (
		<BrowserRouter>
			<Route path="/" exact component={Home} />
			<Route path="/profile" exact component={Profile}  /> // 하위에 나오지 않게 exact 처리
			<Route path="/profile/:id" component={Profile}  /> // ID값이 있는 경우 컴포넌트에서 어떻게 받는지
			<Route path="/about" component={About} />
		</BrowserRouter>
	);

}

export default App;

2) src/pages/Profile.jsx

export default function Profile(props) { // 인자
	console.log(props); // 어떤 데이터가 들어오는지 확인
	return <div>Prfile 페이지 입니다.</div>;
}

3) URL로 이동 후 console창 확인

컴포넌트를 통해 prop이 주입됨 (history, location, match)


4) src/pages/Profile.jsx

export default function Profile(props) {
	const id = props.match.params.id; // match parmas의 id값 얻기
	console.log(id, typeof id); // id의 타입을 알아보기
	return <div>Prfile 페이지 입니다.</div>;
}

match의 params: {id값}

5) URL로 이동 후 console창 확인

6) src/pages/Profile.jsx

export default function Profile(props) {
	const id = props.match.params.id; // match parmas의 id값 얻기
	console.log(id, typeof id); // id의 타입을 알아보기
	return (
		<div>
			<h2>Profile 페이지 입니다.</h2>
			{id && <p>id 는 {id} 입니다.</p>{} // id가 있을 경우
		</div>
	);
}

동적 라우팅 예시 2

localhost:3000/about?name=mark
(?와 key value를 입력하는 방식, 쿼리 스트링 형식)

Query String(쿼리 스트링)이란?

URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법을 말한다.
웹개발에서 데이터를 요청하는 방식 중 대표적인 것이 GET방식과 POST방식인데,
주로 GET방식으로 데이터를 요청할 때 쓰이는 방법이다.
URL주소뒤에 물음표(?)를 붙이고 key1=value1&key2=value2...방식으로 데이터를 요청한다.
예) https://roadofdevelopment.tistory.com?category=python&category=1
이 경우라면 category=python이라는 데이터와 category=1이라는 데이터를 전달한 것이다.
간단하게 말해 '데이터를 넘길 때 주소창을 이용해 넘기는 방법'을 말한다.

참조
https://roadofdevelopment.tistory.com/23
https://namu.wiki/w/%EC%BF%BC%EB%A6%AC%20%EC%8A%A4%ED%8A%B8%EB%A7%81
https://velog.io/@pear/Query-String-%EC%BF%BC%EB%A6%AC%EC%8A%A4%ED%8A%B8%EB%A7%81%EC%9D%B4%EB%9E%80

1) src/App.js

import { BrowserRouter, Route } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';

function App() {
	return (
		<BrowserRouter>
			<Route path="/" exact component={Home} />
			<Route path="/profile" exact component={Profile}  />
			<Route path="/profile/:id" component={Profile}  />
			<Route path="/about" component={About} />
		</BrowserRouter>
	);
}

export default App;

2) src/pages/About.jsx

export default function About(props) { // 인자
	console.log(props); // 어떤 데이터가 들어오는지 확인
	return <div>About 페이지 입니다.</div>;
}

3) URL로 이동 후 console창 확인

4) src/pages/About.jsx

export default function About(props) {
  // console.log(props);
	const searchParams = props.location.search;
	console.log(searchParams);
	return <div>About 페이지 입니다.</div>;
}

5) URLSearchParams()

URL의 쿼리 문자열을 다루는 메소드의 정의

src/pages/About.jsx

export default function About(props) {
  // console.log(props);
	const searchParams = props.location.search;
	console.log(searchParams);

	const obj = new URLSearchParams(searchParams);
	console.log(obj.get('name'));
	return <div>About 페이지 입니다.</div>;
}

6) URLSearchParams() : IE는 호환 안됨

npm i query-string 설치하여 사용

src/pages/About.jsx

import queryString from 'query-string'; // 설치한 패키지 임포트

export default function About(props) {
  // console.log(props);
	const searchParams = props.location.search;
	console.log(searchParams);

	// const obj = new URLSearchParams(searchParams);
	// console.log(obj.get('name'));

	const query = queryString.parse(searchParams); // 문자열 파싱
	console.log(query);
	return (
		<div>
			<h2>About 페이지 입니다.</h2>
			{query.name && <p>name은 {query.name} 입니다.</p>}
		</div>;
	);
}

7) localhost:3000/about?name=Haeun

3. Switch와 NotFound

Switch 컴포넌트

  • 여러 Route 중 순서대로 먼저 맞는 하나만 보여줍니다.
  • exact를 뺄 수 있는 로직을 만들 수 있습니다.
  • 가장 마지막에 어디 path에도 맞지 않으면 보여지는 컴포넌트를 설정해서,
    "Not Found" 페이지를 만들 수 있습니다.

1) src/App.js

import { BrowserRouter, Route, Switch } from 'react-router-dom'; // Switch 추가
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';


function App() {
	return (
		<BrowserRouter>
		<Switch> // Swith로 감싸주기 (Switch문처럼 동작하게 됨)
			<Route path="/" exact component={Home} />
			<Route path="/profile" exact component={Profile}  />
			<Route path="/profile/:id" component={Profile}  />
			<Route path="/about" component={About} />
		</Switch>
		</BrowserRouter>
	);
}

export default App;

가정 1)

1 ~ 10000
1 ~ 1000
1 ~ 100
1 ~ 10

만약 if else를 넓은 범위로 시작해서 아래로 내려갈 경우,
무조건 가장 첫번째 조건에서 걸리게 됨

가정 2)

1 ~ 10
1 ~ 100
1 ~ 1000
1 ~ 10000

가정 1의의 역순일 경우 정확하게 원하는 구간에 사용 가능 (switch/if else)

2) src/App.js 재배치

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import Profile from './pages/Profile';
import About from './pages/About';
import NotFound from './pages/NotFound'; // 추가

function App() {
	return (
		<BrowserRouter>
		<Switch>
			<Route path="/profile/:id" component={Profile}  />
			<Route path="/profile" component={Profile}  />
			<Route path="/about" component={About} />
			<Route path="/" exact component={Home} /> // 모든 경로에도 걸리지 않을 경우 이쪽으로 (root 경로) 가게 되므로 exact 처리
			<Route component={NotFound} /> // 위에서 걸리지 않는 경우는 NotFound로
		</Switch>
		</BrowserRouter>
	);
}

export default App;

3) src/pages/NotFound.jsx 생성

export default function NotFound() {
	return <div>페이지를 찾을 수 없습니다</div>;
}

4) 지정한 범주를 제외한 URL로 들어갈 경우 NotFound로 이동됨

이어서.

profile
productuidev
필요한 내용을 공부하고 저장합니다.
이전 포스트

[fastcampus] Ch.3 Creating React Project

다음 포스트

[fastcampus] Ch4. React Router (2)

0개의 댓글