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

2024. 2. 23. 19:25· TIL/프로그래머스 데브코스
목차
  1. # React Router 응용
  2. #  Path Variable
  3. # Query String
  4. # Page Moving
  5. #  프로젝트 기초공사 1
  6. # 폰트 세팅
  7. # 레이아웃 세팅
  8. # 이미지 에셋 세팅
  9. # 공통 컴포넌트 세팅
  10. # 새로 알게 된 점

# 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

Making the web more beautiful, fast, and open through great typography

fonts.google.com

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

저작권 잘 보고 써야한다

 

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 로 값을 전달받아 사용하는 방법을 배웠으니 앞으로 잘 써먹어야겠다

 

저작자표시 비영리 변경금지 (새창열림)

'TIL > 프로그래머스 데브코스' 카테고리의 다른 글

클라우딩 어플리케이션 엔지니어링 TIL Day 35 - 감정 일기장 만들기 (4)  (0) 2024.02.27
클라우딩 어플리케이션 엔지니어링 TIL Day 34 - 감정 일기장 만들기 (3)  (1) 2024.02.27
클라우딩 어플리케이션 엔지니어링 TIL Day 32 - 감정 일기장 만들기 (1)  (0) 2024.02.23
클라우딩 어플리케이션 엔지니어링 TIL Day 31 - 리액트 기본 간단한 일기장 만들기 (4)  (2) 2024.02.23
클라우딩 어플리케이션 엔지니어링 TIL Day 30 - React 기본 간단한 일기장 만들기 (3)  (1) 2024.02.17
  1. # React Router 응용
  2. #  Path Variable
  3. # Query String
  4. # Page Moving
  5. #  프로젝트 기초공사 1
  6. # 폰트 세팅
  7. # 레이아웃 세팅
  8. # 이미지 에셋 세팅
  9. # 공통 컴포넌트 세팅
  10. # 새로 알게 된 점
'TIL/프로그래머스 데브코스' 카테고리의 다른 글
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 35 - 감정 일기장 만들기 (4)
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 34 - 감정 일기장 만들기 (3)
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 32 - 감정 일기장 만들기 (1)
  • 클라우딩 어플리케이션 엔지니어링 TIL Day 31 - 리액트 기본 간단한 일기장 만들기 (4)
개발자 정지은
개발자 정지은
프로그래밍 공부 기록
개발자 정지은
PROGRAMMING DIARY
개발자 정지은
전체
오늘
어제
  • 분류 전체보기 (107)
    • 알고리즘 (49)
      • BeakJoon (27)
      • SWEA (9)
      • Inflearn (2)
      • CodeSignal (1)
      • Programmers (10)
    • FE (0)
      • Javascript (0)
      • React (0)
    • BE (0)
    • CS공부 (13)
      • Database (7)
      • IT기본지식 (6)
    • TIL (45)
      • 프로그래머스 데브코스 (45)
    • Project (0)
      • DreamHi (0)
      • 인사관리시스템 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • 국비지원교육
  • figma
  • 피그마
  • 알고리즘
  • 자바스크립트
  • 코딩부트캠프
  • 프론트엔드
  • React.JS
  • 리액트
  • javascript
  • ReactNative
  • 프로그래머스 데브코스

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발자 정지은
클라우딩 어플리케이션 엔지니어링 TIL Day 33 - 감정 일기장 만들기 (2)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.