[클라우딩 어플리케이션 엔지니어링 TIL] 240214 - React 실전 프로젝트 2

Intro

---

오늘은 프로젝트에 들어가기 위한 기초 공사에 대해 학습했다.

처음 프로젝트를 시작할 때 뭐부터 건드려야 할 지 막막했는데 그런 고민을 해소해주는 유익한 강의였다.

 

 

 

오늘 학습한 내용

: 페이지 라우팅, 프로젝트 기초 공사

---

리액트 페이지 라우팅 2

React-router-dom의 Hooks

• Path Variable - useParams
• Query String - useSearchParams
• Page Moving - useNavigate

---

useParams

콜론(:) 뒤에 오는 동적 URL을 파라미터로 받는 함수

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

// diary/10
import { useParams } from 'react-router';

...

const { id } = useParams();
console.log(id); // 10

 

 

useSearchParams

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

?로 시작

// ?id=10&mode=dark
import { useSearchParams } from 'react-router-dom';

...

const [searchParams, setSerachParams] = useSearchParams();
const id = searchParams.get('id'); // 10

• ? 뒤에 오는 값들을 get 함수로 가져온다. 
• setSearchParams: searchParams 값을 바꾸는 역할
• ex) setSearchParams({ id: '12345' })

 

useNaviagte

로그인되지 않은 사용자가 로그인이 필요한 페이지를 이용하려고 할 경우, 강제로 로그인 페이지로 이동시킬 때 주로 사용

import { useNavigate } from 'react-router-dom';

const Edit = () => {
  const navigate = useNavigate();

  return (
    <div>
      <h1>Edit</h1>
      <p>이곳은 일기 수정 페이지입니다.</p>
      <button
        onClick={() => {
          navigate('/home');
        }}
      >
        HOME으로 가기
      </button>
      <button
        onClick={() => {
          navigate(-1);
        }}
      >
        뒤로가기
      </button>
    </div>
  );
};

export default Edit;

 

 

 

 

 

 

---

프로젝트 기초 공사

1. 폰트 세팅
2. 레이아웃 세팅
3. 이미지 에셋 세팅
4. 공통 컴포넌트 세팅

---

폰트 세팅

: Google Web Fonts를 이용한 프로젝트에 사용되는 폰트 세팅하기

Browse Fonts - Google Fonts

⚠️ 폰트를 가져와 사용할 땐, 오픈 폰트 라이센스인지 확인하기!

 

레이아웃 세팅

: 모든 페이지에 반영되는 레이아웃 세팅하기

화면의 배경, 글자 폰트 등 모든 페이지에 적용되는 스타일을 body나 #root 태그에 적용한다.

 

이미지 에셋 세팅

: 이미지들을 프로젝트에서 불러와 사용할 수 있는 환경 세팅하기

<img src={process.env.PUBLIC_URL + '/assets/emotion1.png'} />

• process.env.PUBLIC_URL: 현재 프로젝트에서 public 폴더의 경로

 

공통 컴포넌트 세팅

: 모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트 세팅하기

• 버튼 등 프로젝트에서 공통으로 쓰이는 컴포넌트를 패턴화하는 과정이다.
• 공통 컴포넌트를 만들고 props로 조건에 맞게 컴포넌트를 가져와 사용하도록 구현

 

 

 

 

 

 

 

마무리

---

강이가 짧아서 금방 끝났는데 강의를 듣는 거에서 끝나는 게 아니라 강의에서 배운 걸 실무에서 직접 사용할 수 있도록 내 것으로 만들어야 한다. 복습을 열심히 하자!