데브코스 13주차 Day1 - [react/typescript] 프로젝트 생성 및 초기 설정 - 라우팅/bootstrap

목차 [심화과정]

• 레이아웃
• import / export
• 반복루틴 - 컴포넌트 map
• 라우팅
• styled - components
• useEffect, Hook
• 서버와의 통신 Ajax
• Context API
• 리덕스

 

타입 스크립트 기반으로 리액트 프로젝트 생성하기

1. 리액트 프로젝트 생성

npx create-react-app . --template typescript

 

번외로 파일이  node_modules,package.json, yarn.lock 이것밖에 안생겨서 문제찾는데 한참 걸렸다 ㅜㅜ

알고보니 용량 부족 ㅎㅎ,,

 

참고

디렉토리를 .으로 하면 해당 폴더에 생성된다.

 

 

2. 부트스트랩 설치 & 적용

https://react-bootstrap.netlify.app/

React Bootstrap | React Bootstrap

 

npm install react-bootstrap bootstrap

 

부트스트랩의 css link를 index.html에 복사

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
  integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
  crossorigin="anonymous"
/>

 

App.tsx에 react-bootstrap import하기 - 예) Button쓰는 경우

import {Button} from "react-bootstrap";

 

 

3. 라우팅 설정

npm install react-router-dom@6

 

설치 후 index.html에서 import 후 기본 설정

import { BrowserRouter } from 'react-router-dom';}
//...
root.render(

  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

//...

=> app.tsx에서 라우터를 사용할 수 있음

 

app.tsx에서 라우팅

import { Route, Routes } from "react-router-dom";

 

라우팅 참고  - nested routes

• "/about/map" 또는 "/about/time" 처럼 하위 route를 만들고 싶은 경우는 다음과 같이 사용하면 중복을 피하고 간결하게 표현할 수 있다.
• app.tsx - 중첩 route

<Routes>
   <Route path="/about" element={<About />}>
   		<Route path="map" element={<div>식당 위치:**시 **동</div>}></Route>
        <Route
            path="time"
            element={<div>운영 시간:11:00 am - 20:00 pm</div>}
        ></Route>
   </Route>
</Routes>

이후 element에 해당하는 내용을 보이고 싶은 about 페이지에 <Outlet />을 넣어주면 된다.

 

• about.tsx - Outlet을 통해 해당 내용 보여주기

import { FC } from "react";
import { Outlet } from "react-router-dom";

const About: FC = () => {
  return (
    <div>
      <h1>음식점 정보</h1>
      <img src={process.env.PUBLIC_URL + "/restaurant.png"} width="100%"></img>
      <Outlet />
    </div>
  );
};

export default About;

=> 이 때, process.env.PUBLIC_URL과 이미지 파일 이름을 연결할 때 올바른 상대 경로를 형성하려면 슬래시("/")를 포함한다.

 

 

 

Link와 useNavigate

<Nav className="me-auto">
      <Nav.Link
        onClick={() => {
           navigate("/");
      	}}
      >
      Home
     </Nav.Link>
</Nav>

<Link to="/">home</Link>
<Link to="/detail">디테일</Link>

 

존재하지 않는 페이지 처리

<div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/detail/:id" element={<Detail />}></Route>
        <Route
          path="*"
          element={<div>존재하지 않는 페이지입니다.</div>}
        ></Route> //  모든 페이지를 의미
      </Routes>
</div>

 

=> "*"은 모든 페이지를 의미한다. 위에서 모두 걸리지 않은 경우 실행된다. 즉, route가 설정되지 않은 경우 실행되는 경우이다.

 

=> 참고로 이와 같이 버튼을 눌러 쉽게 주소를 바꾸고 Outlet을 적용할 수 있다.

<button
        className="btn btn-primary"
        onClick={() => {
          navigate("/about/time");
        }}
        style={{ margin: "10px" }}
      >
        시간
</button>
<button
        className="btn btn-warning"
        onClick={() => {
          navigate("/about/map");
        }}
        style={{ margin: "10px" }}
      >
        위치
</button>

 

 

이미지 저장 경로

public에서 root경로를 따르는 것이 좋다. 

사용할 때는 다음과 process.env.PUBLIC_URL을 붙여 사용한다.

<img
   src={process.env.PUBLIC_URL + "coffee1.jpg"}
   width="100%"
></img>

 

 

구현한 부분

• App.tsx에서 route
  • nested route 사용
  • /:id를 통해 detail 페이지 라우팅
• Home 컴포넌트
  
  • 처음으로 bootstrap 사용해봄 - grid
• Header 컴포넌트
  • bootstrap 사용 - navbar
• About 컴포넌트
  • Outlet 적용