클라우딩 어플리케이션 엔지니어링 TIL Day 33 - 감정 일기장 만들기 (2)

# React Router 응용

지난 시간에 설정한 page routing 을 응용해보자!

 

#  Path Variable

Diary 컴포넌트에서 각각의 다이어리를 보여줄 때 어떤 일기를 보여주어야 할 지 정보를 전달받아야 한다

즉 /diary/1 과 같이 몇번 째 일기인지 숫자를 받아야 할 수 있다

Route path 에서 path variable인 id를 붙여주자

<Route path="/diary/:id" element={<Diary />} />

Diary 컴포넌트에서는 useParams 를 사용해서 id 값을 꺼낼 수 있다

 

useParams란 뭘까?

사용자 정의 hook, custom hook

 

# Query String

Query

웹 페이지에 데이터를 전달하는 가장 간단한 방법이다

 

/edit?id=10&mode=dark

와 같은 것들이 Query String 이다

Query String 으로 전달하면 별도의 처리 없이 자동으로 매핑된다

 

 그럼 Edit 컴포넌트에 적용해보자

 

Query String을 어떻게 꺼낼까?

비구조화 할당 사용

 

useSearchParams 를 사용해서 Query String 을 꺼낼 수 있다

  const [searchParmas, setSearchParams] = useSearchParams();
  const id = searchParmas.get("id");
  const mode = searchParmas.get("mode");

get을 사용하여 searchParmas 의 Query String 을 꺼낼 수 있다

setSearchParmas 는 searchParams 를 변경한다

즉 Query String을 변경하는 것이다

 

# Page Moving

useNavigate() 를 사용해서 페이지를 이동시켜보자

 Edit 컴포넌트에서 진행하자

  const navigate = useNavigate();

  return (
    <div>
      <h1>여기는 Edit</h1>
      <button onClick={() => navigate("/home")}>홈으로</button>
    </div>
  );

navigate 를 선언해주고 home 컴포넌트로 이동할 수 있는 버튼을 만들자

홈으로 버튼을 클릭하니

Home 컴포넌트로 잘 이동했다

만약 이전 페이지로 이동하게 하고 싶으면 -1을 넣어주면 된다

---

#  프로젝트 기초공사 1

# 폰트 세팅

https://fonts.google.com/

Browse Fonts - Google Fonts

해당 사이트에서 사용하고자 하는 폰트를 가져와서 쓰면 된다

저작권 잘 보고 써야한다

 

1. 사용할 폰트 클릭

2. web -> @import 코드 style 태그 제외 복사

3. App.css 최상단에 붙여넣기

4. CSS class 내의 font-family 코드를 App 클래스 css 내에 붙여넣기

폰트 적용!

 

# 레이아웃 세팅

App.css 파일에 프로젝트 전체적으로 적용될 스타일을 설정하여 틀을 정하자

완성된 모습

 

# 이미지 에셋 세팅

강의 자료에 첨부된 이미지들 assets 폴더 내로 옮기면 끝

 

# 공통 컴포넌트 세팅

모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트를 세팅해보자

 

# 버튼 컴포넌트

우선 버튼 컴포넌트를 생성한다

const MyButton = ({ text, type, onClick }) => {
  return (
    <button className={"MyButton"} onClick={onClick}>
      {text}
    </button>
  );
};

export default MyButton;

버튼 컴포넌트는 버튼 내부에 적힐 텍스트, 색, 클릭 시 일어날 이벤트를 props 로 전달받아서 필요한 곳에서 사용할 수 있도록 로직을 작성한다

App.js 에 import 해서 어떤 식으로 보이는지 확인 후 css를 설정해주자

이제 type prop 에 따라 다른 스타일을 가지도록 설정해주자

className 에 동적으로 type 을 받도록 설정한다

기본값은 default 로 설정한다

import React from "react";

const MyButton = ({ text, type, onClick }) => {
  return (
    <button
      className={["MyButton", `MyButton_${type}`].join("")}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

MyButton.defaultProps = {
  type: "default",
};

export default MyButton;

css에서 type에 따라 다르게 적용되도록 설정해주면 된다

.MyButton_default {
  background-color: #ececec;
  color: black;
}

.MyButton_positive {
  background-color: #64c964;
  color: white;
}

.MyButton_negative {
  background-color: #fd565f;
  color: white;
}

이렇게 다른 스타일을 적용해보니

className 에 따라 설정한 CSS 가 잘 적용된 것을 확인할 수 있다

만약 버튼의 type이 존재하지 않는 이상한 글자가 들어올 경우를 대비하여

존재하지 않는 type 이면 강제로 default 로 변경해주는 코드를 추가해주자

  const btnType = ["positive", "negivate"].includes(type) ? type : "default";

 

# 헤더 컴포넌트

헤더 텍스트, 오른쪽, 왼쪽 자식에 따라 다른 헤더가 적용되도록 하는 컴포넌트를 만들어보자

props 로 headText, rightChild, leftChild 를 받는다

const MyHeader = ({ headText, leftChild, rightChild }) => {
  return (
    <header>
      <div className="head_btn_left">{leftChild}</div>
      <div className="head_text">{headText}</div>
      <div className="head_btn_right">{rightChild}</div>
    </header>
  );
};

export default MyHeader;

이제 이 컴포넌트를 App 컴포넌트에 추가

적절한 css도 추가한다

원하는대로 헤더가 잘 완성되었다!

---

# 새로 알게 된 점

프로젝트를 시작할 때 초기 세팅은 필수이다

따라서 오늘 강의는 모든 프로젝트의 기초가 되는 아주 중요한 내용이다

공통으로 사용되는 컴포넌트들을 초반에 미리 만들어놓으면 그 이후에 매우 편리하게 쓸 수 있다

지금까지 레이아웃 컴포넌트를 만들어서 공통적으로 적용시켜 본 적은 있지만 버튼 컴포넌트를 어떻게 분리해야 할지는 몰랐다

하지만 오늘 강의를 통해 props 로 전달받은 값을 통해서 각각 다른 버튼을 렌더링하는 방법을 배우고 또한 헤더 컴포넌트도 각 상황에 따라서 다른 설정을 지정해 줄 수 있어서 매우 유익하였다

props 로 값을 전달받아 사용하는 방법을 배웠으니 앞으로 잘 써먹어야겠다