Today I Learned (TIL)

리액트로 팬레터 사이트 만들기 -1- 23.11.16

폼폼코 2023. 11. 16. 23:10
728x90
반응형

기본적인 세팅을 마친 후 전역스타일링을 하고 있다 이어지는 방법은 뭔지 알겠는데 실제로 적용시키는 게

음... 많이 번거롭다? improt를 몇개나 하는지 모르겠다 componets 가 계속 늘어나는 중이다

 

 

(3) Router 셋업

  • react-router-dom 을 이용하여 홈화면과 상세화면에 대한 라우터 설정을 해주세요.
yarn add react-router-dom 명령어 입력후 설치
  1. 페이지 컴포넌트 생성 -사실 제대로 사용하는건 Home,Detail.jsx 2개이기에 나머지는 삭제했다
  2. Router.js 생성 및 router 설정 코드 작성 - src 내부에 pages라는 폴더에 위에 2개 컴포넌트 보관후
  1. 추가로 shared라는 폴더에 Router.js이제 여기에 route 설정 코드 작성

브라우저에 우리가 URL을 입력하고 이동했을 때 우리가 원하는 페이지 컴포넌트로 이동하게끔 만드는 부분 URL 1개당 페이지 컴포넌트를 매칭해 주는 것이죠. 이 한 개의 URL을 Route라고 합니다.

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

먼저 필요한 것들을 임포트 해준후 추가로 만들어둔 컴포넌트인 Home,Detail 컴포넌트도 import 해줍니다

한 개의 Route별로 경로를 설정해 줬습니다 기본 페이지인 "/"는 홈페이지로

상세페이지는 "detail"이라는 경로를 설정해 주었습니다

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;
 

기본적인 예제입니다 보일러 플레이트 마냥 외우는 게 편하다고 합니다 추후에 좀 더 자세히 알아봐야겠습니다

  1. App.js에 import 및 적용
Ctrl 키  를 누르고 컴포넌트를 클릭하면 해당 컴포넌트로 이동가능합니다 (어디서 온건지 헷갈리면 클릭)
 

만들어둔 컴포넌트를 모두 모아둔 <Router /> 컴포넌트를 App, jsx에 리턴 뒤에 넣어줍니다

(글로벌 스타일도 넣어줘야 해서 빈 <> 사이에 </> 넣어줌 좀 더 자세히 설명하면

 

Router.js를 다른 곳도 아닌 App 컴포넌트에 넣어주는 이유는 우리가 만든 프로젝트에서 가장 최상위에 존재하는 컴포넌트가 App.js 이기 때문입니다. 즉 우리가 어떤 컴포넌트를 화면에 띄우던, 항상 App.js를 거쳐야만 합니다.

그래서 path 별로 분기가 되는 Router.js를 App.js에 위치시키고 우리의 서비스를 이용하는

모든 사용자가 항상 App.js → Router.js 거치도록 코드를 구현해 주는 것입니다.

 

app.js 에 Router.js를 넣어주고 또 Router.js안에 Home, Detail.jsx 컴포넌트를 넣어주고

또 각각 Home, Detail.jsx

또 TestPage.jsx안에 기본 화면구성을 위해

 

  1. 페이지 이동 테스트
useNavigate 사용해서 간단한 이동버튼을 만들었습니다 추후에 스타일링통해서 위치조정해야겠습니다

 

 

(4) 전역스타일링 적용

  • styled-components 를 이용해 주세요. (App.css, index.css 는 삭제하셔도 좋습니다.)

 

  • reset.css 코드 및 box-sizing 적용

 

전역스타일링을 위해 styled-components 기능 중 하나인 createGlobalStyle를 사용하였습니다

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStylebody {
        font-family: "Helvetica", "Arial", sans-serif;
        line-height: 1.5;     
    }`
export default GlobalStyle;
 

이런 식으로 기본적으로 적용되는 폰트 글자 라인크기 등 을 설정할 수 있습니다

reset.css 내용도 가져와 그대로 집어넣어 줬습니다 적용은 정상적으로 되었습니다

여기서 궁금했던 게 그럼 index.js에 import 해서 사용하는 reset.css랑

App.jsx에 바로 넣어서 사용하는 createGlobalStyle는 무슨 차이일까 했는데

 

 

reset.css 는 브라우저의 기본 스타일을 재설정하는 데 사용하고

styled-component로 globalStyle을 적용하는 것은

React 애플리케이션의 전역적인 스타일을 관리하는 데 사용,

모두 일관된 디자인을 하기 위한다는 점에서는 동일함

라고 합니다 적용되는 순서차이는 좀 있지만 성능은 동일합니다

그 와중에 TIL쓰는데 실시간 에러가 나버렸습니다

그와중에 뭘 잘못 건드렸는지 test페이지가 날아가 버려서 구동이 안됩니다

페이지 이름도 바꿔보고 export 안 된 거 있나 찾아보고 다 지우고 git clone 해버릴까.. 하다가 결국

결국은 TestPage라는 게 중복으로 선언돼서MyTestPage 바꿔주니 정상작동합니다

아까 갑자기 생성된 테스트페이지 01, 은 황급하게 삭제하는 바람에 왜 생겼는지도 모르겠네요

아마 TIL 쓰면서 오늘 쪽에 vs코드를 띄워놓으니 이상한 단축키가 눌렸나 봅니다 원인은 못 찾았지만 해경은했

습니다... 혹시 기본 폴더 이름 중에 TestPage라는 게 이미 있는 거 아닐까요? 좀 더 찾아봐야겠습니다

일단은 정상 작동되니 커밋 푸시해야겠습니다 아 이런 머지를 잘못했는지 다 날아가버렸나 봐요...

그래도 다행이 git pull 해결했습니다

 

 

 

728x90
반응형