KDT 5th 웹개발자 입문 수업 41일차

Global Style 적용하기

Styled Component 로 컴포넌트 단위에 스타일을 적용하고

리액트 App 전체에 특정 폰트를 적용하거나 공통 스타일을 적용하고 싶을 때 Global Style 을 사용해준다.

이는 styled components 의 createGlobalStyle() 함수를 사용하면 가능한데, 이 함수를 사용하여 전역 스타일 컴포넌트를 만들어 최상위 컴포넌트로 추가해주면 모든 컴포넌트에 공통 스타일이 적용된다.

 

구글 폰트에서 받아준 폰트의 link 부분을 index.html 에 <link> 추가

기본적으로 리액트는 SPA 이므로 index.html 하나만 존재한다.

 

전역 스타일 지정하기 위한 jsx 파일 만들어주기

가장 먼저 styled-components 의 함수를 import 해준다.

import { createGlobalStyle } from 'styled-components'

createGlobalStyle 함수를 사용하여 ` ` 안에 전역 스타일 지정해주기

const GlobalStyle = createGlobalStyle`
  body {
    font-family: 'Nanum Brush Script', cursive;
  }
`;

export default GlobalStyle;

 

Global Style Component 적용은 컴포넌트를 최상위에 둔다. (index.js)

자식 컴포넌트가 아닌 형제 컴포넌트부터 전역 스타일이 지정된다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <GlobalStyle /> // 이후 아래 컴포넌트가 모두 적용이 됨
    <App />
  </>,
);

 

props 값으로 스타일 변경하기

const MyDiv = styled.div`
  background-color: ${(props) => props.color};
`;

export default function PropsStyle({ color = 'blue' }) {
  return <MyDiv color={color}>PropsStyle</MyDiv>;
}

부모에게 받은 props를 styled-components 로 만들어준 컴포넌트에게도 props 를 넘겨줘서

스타일을 지정해줄 수 있다.

보통 버튼의 색을 지정할 때 사용함

 

 

리액트와 Sass 사용하기

리액트는 컴포넌트에 컴포넌트가 들어가는 구조므로 중첩 문법을 지원하는 Sass 와의 궁합이 좋다.

 

npm i -S sass 로 설치 (node-sass 가 아님)

 

import 'Scss파일명.scss' 로 import 해주면 따로 css로 변환이 필요가 없다!(node가 자동 변환해줌)

 

 

 

컴포넌트를 꾸미는 방식으로는 1. styled-components 2. scss 3. 순수 css 방식으로 나눠진다.

한가지 방식으로 통일 시키는 것이 좋음

---

 

public 폴더

node 를 직접 다룰 땐 public 폴더를 직접 만들어서 static 처리를 해줘야 했지만

 

npx create-react-app 을 통하여 만들어진 리액트 앱의 경우 public 폴더가 자동으로 static 처리가 된다.

그래서 어느 위치에서건 / 를 사용하여 접근하면 public 폴더가 호출될 수 있다.

import React from 'react';
import lionImg from '../../images/lion.png';

export default function ImageComponents() {
  return (
    <>
      <h1>퍼블릭 폴더</h1>
      <img src="/images/chunsik.jpeg" alt="퍼블릭" />
      <h1>src 폴더</h1>
      <img src={lionImg} alt="src" />
    </>
  );
}

퍼블릭 폴더 안 이미지는 위치가 그대로 노출되지만

src 폴더로 import 한 이미지의 경우 (특성상) 위치가 그대로 노출되지 않는다.

 

 

props.children

이미 정해진 Props 에 전달하는 값이 아닌 상황에 따라 html 요소 또는 컴포넌트 자체를 보내고 싶을 때

컴포넌트의 자식 요소를 한번에 전달해주는 프로퍼티이다.

이는 만들어준 컴포넌트든 태그든 상관없이 사용이 가능하다.

<컴포넌트> </컴포넌트> 에서 안에 들어가는 모든 컴포넌트가 props.children 에 들어가지는 것이다.

export default function FancyBorderContainer() {
  return (
    <div>
      <FancyBorder color="red">
        <h1>props.children</h1>
        <p>구구까까</p>
      </FancyBorder>
    </div>
  );
}



export default function FancyBorder(props) {
  return (
    <div
      style={{
        border: `3px solid ${props.color}`,
      }}
    >
      {props.children}
    </div>
  );
}

 

 

React에서의 Router

리액트는 컴포넌트별 라우팅이 가능

주소에 따른 구분을 해줘야만 서비스별 구분이 가능하므로 라우팅 기능을 활용해줘야 한다.

그리고 해당 모듈을 쓰면 페이지 깜박임 없이 부드러운 브라우징이 가능하다.

 

 

npm i -S react-router-dom 으로 설치

<BrowserRouter> 컴포넌트로 감싸줘서 사용이 가능 이 컴포넌트는 react-router-dom 을 설치해야 사용이 가능

해당 <BrowserRouter> 로 감싸주어야 컴포넌트에서 발생하는 주소값 변경을 감지할 수 있는 것이다.

✚ <HashRouter> 도 유명하며, 주소의 해시 주소 localhost:PORT/#hash 를 감지할 수 있는 라우터이다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

 

컴포넌트 라우팅을 구현하기 위해 Route 를 import 시킨다.

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

Routes 컴포넌트 내부에 Route 컴포넌트를 넣어주고

각각의 주소 값은 Route 컴포넌트의 path 속성에, 호출할 컴포넌트는 element 속성으로 불러주면 된다.

      <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/board" element={<Board />} />
      </Routes>

 

결과적으로 해당 형태로 작성해주면 된다.

function App() {
  return (
    <div className="App">
      <Nav />
      <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/board" element={<Board />} />
      </Routes>
    </div>
  );
}

 

<a> 태그는 브라우저 레벨에서 페이지를 자동으로 새로고침(window.location.reload() 이 자동으로 실행)하기에 리액트에서는 이를 막고자 <Link to=''> 라는 컴포넌트를 사용한다.

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

Link 컴포넌트는 html 상에서 <a> 태그로 변경이 되지만 브라우저 새로고침 없이 주소만 변경해주는 역할을 한다.

 

 

Route 의 주소 예외 처리 (Page Not Fount)

실제 서비스의 경우 사용자가 예상하지 못한 주소값을 입력하는 경우가 발생한다.

 

이럴 때 브라우저가 제공하는 404 Not Found 페이지를 띄우면

서버 응답을 기다리는 시간도 오래걸릴 뿐만 아니라 결과 페이지가 서비스의 신뢰를 깨는 역할을 하게 된다.

 

그렇기에 잘못 입력된 주소에 대한 예외 처리가 필요한데,

react-router-dom 모듈은 해당 부분에 있어서 *을 사용한 방법을 제공한다.

*은 모든 주소 입력을 의미하며

<Route path="*" element={<NotFound />} />

위에 주소 처리를 해도 일치되는 부분이 없으면 아래의 라우터로 순차적으로 내려오게 된다.

이때 나머지 주소처리에 해주는 방식이다.

 

 

주소의 Parameter 값 활용

백엔드에서 주소로 전달되는 parameter 는 중요하게 사용되듯 리액트 라우터에서도 parameter 사용이 가능하다.

 

주소 처리 방법

주소상 /로 시작하고 어떤 주소는 /가 없이 시작하는데,

1. / 로 시작하는 경우,

localhost:PORT 뒤에 / 주소가 이어진다.

 

2. / 없이 시작하는 경우,

현재 라우팅 된 주소의 뒤에 해당 주소의 문자열이 추가된다.

즉, localhost:PORT/board 가 현재 라우팅 주소라면, 

      <Link to="1">
        <h4>게시글 1</h4>
      </Link>

의 경우, localhost:PORT/board/1 가 주소로 되는 것이다.

 

App.js 에 선언된 라우터 선언부에 Parameter 를 선언하려면,

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

import 해주고 

<Route parh="/board/:boardId" element={<BoardDetail />} />

express 라우터를 사용하듯이 /:params명 형태로 Route 처리해준다.

그렇게 되면 parameter 로 전달 받은 값을 useParams 로 선언한 객체 변수에 담기게 된다.

 

parameter 로 선언한 이름이 Key 로 설정됨