2주차 태스크 - React Router v6 공부하고, 적용해보기
-
React-Router란?
-
React-Router-DOM이란?
-
React-Router 사용해보기
-
실습 코드 리뷰
1. React-Router란?
클라이언트 측 라우팅을 활성화한다. 앱이 서버에서 다른 문서를 다시 요청하지 않고도 URL을 업데이트할 수 있다. 새로운 UI를 즉시 렌더링 하고 데이터를 요청하여 ‘fetch’ 페이지를 업데이트할 수 있다. 이를 통해 더 빠른 사용자 경험이 가능하다. - 공식 문서
라우팅이란:
네트워크에서 경로를 선택하는 프로세스를 의미한다.
다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시키는 작업이다.
React-Router를 사용하는 이유
a 태그와 router의 차이
- a 태그는 페이지 전체가 새로 렌더링됨
- 화면 깜빡임이 필수적으로 발생: 부드럽지 못함
- router는 새로운 로딩 없이 부드러운 화면 전환이 가능하다
React-Router의 한계
- 특정 페이지 즐겨찾기 등록 불가
- 화면 전환이 되었지만 url은 고정되어있기 때문이다
- 뒤로가기 불가능
- 뒤로가기를 누르면 다른 웹사이트로 이동하게 됨
- 새로고침 불가능
- 새로고침시 가장 처음의 렌더링 페이지로 이동하게 된다
React-Router의 종류
1. HashRouter
URL의 해쉬(#)값을 이용하는 라우터
- 주소에 해쉬(#)가 붙음
- 검색 엔진이 읽지 못함
- 라우팅하는 사실을 서버가 알지 못한다
- history API를 사용하지 않아 동적 페이지에서 불리함
2. BrowserRouter (메인)
HTML5를 지원하는 브라우저의 주소를 이용하는 라우터
- histroy API 사용
- 큰 프로젝트에 적합
- histroy API란? 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 URL 기록들을 쌓는 형태로 저장한다
2. React-Router-DOM이란?
React로 생성된 SPA(Single Page Application) 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리
3. React-Router 사용해보기
설치
npm:
npm install react-router-dom
yarn:
yarn add react-router-dom
태그 종류
1. <BrowserRouter>
Routes를 감싼다
2. <Routes>
여러 Route를 감싸서 그 중 규칙이 일치하는 라우트를 렌더링 시켜주는 역할
3. <Route>
path 속성에 경로, element 속성에는 컴포넌트를 넣어준다. 여러 라우팅을 매칭하고 싶은 경우에는 URL 뒤에 * 사용
4. <Link>
History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.
import {Link} from 'react-router-dom';
<Link to="경로">링크명</Link>
4. 실습 코드 리뷰
이번에는 Tailwind도 한 번 사용해봤다.
Install Tailwind CSS with Create React App(공식 문서)
- 프로젝트 생성
yarn create react-app [폴더명]
- tailwind를 다운받고 postcss.config.js와 tailwind.config.js 파일을 생성한다. -D 옵션은 패키지를 개발 종속성으로 추가한다는 의미.
yarn add -D tailwindcss npx tailwindcss init -p
- tailwind.config.js 파일을 아래와 같이 수정해 src 내의 모든 파일에서 tailwind를 사용할 수 있도록 한다.
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], }
- index.css 최상단에 추가해 tailwind css를 import 한다.
@tailwind base; @tailwind components; @tailwind utilities;
보통 Tailwind를 깔면서 postcss랑 autoprefixer를 같이 설치하는 것 같다. 난 설치 안했지만 메모해봄.
- tailwindcss: Tailwind CSS 프레임워크
- postcss: CSS 빌드 프레임워크
- autoprefixer: 브라우저 호환 설정
yarn add -D tailwindcss postcss autoprefixer보통 위 명령어로 한 번에 Tailwind와 의존성 설정을 한번에 설치하는 듯.
App.jsx
import "./App.css";
import Router from "./Router";
function App() {
return (
<div>
<Router />
</div>
);
}
export default App;Router.jsx
피드백:
라우터 관리는 보통 App.jsx에서 관리한다고 한다.
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Footer from "./components/Footer";
import Main from "./pages/Main";
import Week1 from "./pages/Week1";
import Week2 from "./pages/Week2";
export default function Router() {
return (
<div class="min-h-max">
<BrowserRouter>
<Header />
<Routes>
<Route path="/" element={<Main />}></Route>
<Route path="/week1" element={<Week1 />}></Route>
<Route path="/week2" element={<Week2 />}></Route>
</Routes>
<Footer />
</BrowserRouter>
</div>
);
}Main.jsx
import React from "react";
import { Link } from "react-router-dom";
export default function Main() {
return (
<div class="min-h-screen px-10">
<p class="h-6"></p>
<div class="h-60 px-8 flex items-center border-solid border-2">
<h1 class="text-5xl">Techeer Partners 3rd - Team B</h1>
</div>
<p class="h-8"></p>
<h1 class="text-2xl">[React Study]</h1>
<p class="h-4"></p>
<div className="h-16 flex items-center">
<Link to="/week1">
<h1 class="text-xl font-medium">
1주차 태스크 - React 컴포넌트를 이해하고 정적 페이지 만들기
</h1>
</Link>
</div>
<div className="h-16 flex items-center">
<Link to="/week2">
<h1 class="text-xl font-medium">
2주차 태스크 - React-Router v6 공부하고 적용해보기
</h1>
</Link>
</div>
</div>
);
}Week1.jsx
import React from "react";
import week1 from "../images/week1.png";
import YellowBox from "../components/YellowBox";
export default function Week1() {
return (
<div class="h-screen px-20">
<p class="h-6"></p>
<div className="h-16 flex items-center">
<h1 class="text-3xl font-semibold">
1주차 태스크 - React 컴포넌트를 이해하고 정적 페이지 만들기
</h1>
</div>
<hr class="pb-10" />
<div class="flex">
<img src={week1} class="w-64"></img>
<div class="ml-10 w-full">
<YellowBox type="text-2xl mb-2 font-medium" cont="공부 내용" />
<p class="h-4"></p>
<p>- CSS Flex 연습</p>
<p>- 컴포넌트: 리액트에서 UI 요소를 표현하는 최소한의 단위</p>
<p>- props(매개변수) 사용해보기</p>
<p class="h-14"></p>
<YellowBox type="text-2xl mb-2 font-medium" cont="정기미팅 피드백" />
<p class="h-4"></p>
<p>- CSS 파일들은 components 폴더에 넣지 않고 따로 관리</p>
<p>- Tailwind CSS도 따로 그룹화 가능</p>
</div>
</div>
<p class="h-8"></p>
</div>
);
}Week2.jsx
content 내용에 {, } 등의 기호를 넣고 싶을 땐 중괄호와 큰따옴표로 감싸서 {"이 안에 넣으면 된다."}
import React from "react";
import YellowBox from "../components/YellowBox";
import Quotation from "../components/Quotation";
export default function Week2() {
return (
<div className="min-h-screen px-20">
<p className="h-6"></p>
<h1 className="text-3xl font-semibold">
2주차 태스크 - React-Router v6 공부하고 적용해보기
<p className="h-3"></p>
</h1>
<hr className="pb-7" />
<div className="flex">
<div className="ml-6">
<h1 className="text-xl mb-2">공부 내용</h1>
<p>- React-Router에 대해 알아보기</p>
<p>- 컴포넌트: 리액트에서 UI 요소를 표현하는 최소한의 단위</p>
<p>- React-Router를 사용해 화면전환 구현해보기</p>
<p>- Tailwind 체험</p>
</div>
</div>
<p className="h-10"></p>
<YellowBox type="text-2xl font-semibold" cont="React-Router란?" />
<p className="h-4"></p>
<Quotation cont="클라이언트 측 라우팅을 활성화한다. 앱이 서버에서 다른 문서를 다시 요청하지 않고도 URL을 업데이트할 수 있다. 새로운 UI를 즉시 렌더링 하고 데이터를 요청하여 ‘fetch’ 페이지를 업데이트할 수 있다. 이를 통해 더 빠른 사용자 경험이 가능하다." />
<p className="h-8"></p>
<h2 className="text-2xl font-medium">React-Router의 종류</h2>
<p className="h-5"></p>
<h3 className="text-xl">1. HashRouter</h3>
<p className="h-4"></p>
<Quotation cont="URL의 해쉬(#)값을 이용하는 라우터" />
<p className="h-5"></p>
<ul className="list-disc">
<li>주소에 해쉬(#)가 붙음</li>
<li>검색 엔진이 읽지 못함</li>
<li>라우팅하는 사실을 서버가 알지 못한다.</li>
<li>history API를 사용하지 않아 동적 페이지에서 불리함</li>
</ul>
<p className="h-5"></p>
<h3 className="text-xl">2. BrowserRouter</h3>
<p className="h-4"></p>
<Quotation cont="HTML5를 지원하는 브라우저의 주소를 이용하는 라우터" />
<p className="h-5"></p>
<ul className="list-disc">
<li>history API 사용</li>
<li>큰 프로젝트에 적합</li>
</ul>
<p className="h-12"></p>
<YellowBox type="text-2xl font-semibold" cont="React-Router-DOM이란?" />
<p className="h-4"></p>
<Quotation cont="React로 생성된 SPA(Single Page Application) 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리" />
<p className="h-12"></p>
<hr className="pb-7" />
<YellowBox type="text-2xl font-semibold" cont="React-Router 사용해보기" />
<p className="h-8"></p>
<h2 className="text-2xl font-medium">태그 종류</h2>
<p className="h-5"></p>
<h3 className="text-xl">
1. {"<"}BrowserRouter{">"}
</h3>
<p className="h-4"></p>
<Quotation cont="Routes를 감싼다" />
<p className="h-5"></p>
<h3 className="text-xl">
2. {"<"}Routes{">"}
</h3>
<p className="h-4"></p>
<Quotation cont="여러 Route를 감싸서 그 중 규칙이 일치하는 라우트를 렌더링 시켜주는 역할" />
<p className="h-5"></p>
<h3 className="text-xl">
3. {"<"}Route{">"}
</h3>
<p className="h-4"></p>
<Quotation cont="path 속성에 경로, element 속성에는 컴포넌트를 넣어준다. 여러 라우팅을 매칭하고 싶은 경우에는 URL 뒤에 * 사용" />
<p className="h-5"></p>
<h3 className="text-xl">
4. {"<"}Link{">"}
</h3>
<p className="h-4"></p>
<Quotation cont="History API를 통해 브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다." />
<p className="h-5"></p>
<ul className="pl-5 list-disc">
<li>
import {"{"}link{"}"} from 'react-router-dom';
</li>
<li>
{"<"}Link to="경로"{">"}링크명{"<"}/Link{">"}
</li>
</ul>
<p className="h-12"></p>
</div>
);
}결과물
Tailwind 반짝 사용 후기
장점
- css 파일을 따로 만들지 않고 한 파일 안에 하니까 편리했음.
단점
-
처음 사용해봐서 용어를 모르니까 매번 찾아봐야하는게 조금 번거로웠음. 이 부분은 숙련도가 올라가면 사라질 단점인 듯.
-
색을 정해진 색만 사용해야 되는 점에서 자유도가 떨어짐.
편리를 취하고 자유도를 낮출 것인가? 사용자 정의 색상을 사용하고 싶을 때는 tailwind config 속성을 수정해야하는 것 같다.
피드백 및 질의응답
React에서 Tailwind를 사용할 때는 class가 아니라 className으로 사용한다.
Q: Tailwind에서 ul의 list-disc 항목이 적용이 안된다 ㅠㅠ
해답을 아직 못 얻음. 안 될 이유가 없는데 안 되고 있음 왤까... 다시 찾아봐야겠다.
3주차 태스크:
뉴스 뷰어 API 연동해보고, API가 무엇인지 공부하기
Backend