React mini Project (3) - 프로젝트 초기 설정

이번 장에선 개발하기 위한 환경 설정이 다 끝났으니 만들 프로젝트의 초기 설정을하겠다.

일단 index.tsx부터 설정해보자.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);

root.render(<Router />);

React 18 버전 부터 ReactDOM.render 메서드가 아니라 createRoot 메서드를 사용해야 한다.

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

그 전에 버전과 같은 방식으로 ReactDOM.render 메서드를 사용할 경우, 이러한 경고 메시지를 띄운다.

자 다음은 Router 컴포넌트를 만들고

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Main from './Main/Main';
import Navi from './Navi/Navi';
import Sign from './Sign/Sign';

const Router = () => {
  return (
    <BrowserRouter>
      <Navi />
      <Routes>
        <Route path='/' element={<Main />} />
        <Route path='/sign' element={<Sign />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

그리고 스타일 컴포넌트를 사용하여 스타일을 지정해주겠다.
설치

npm i styled-components

스타일 컴포넌트(CSS-in-JS)를 사용하는 이유는 한 컴포넌트에 HTML, CSS, JS를 모두 포함하여 관리하기 위해서이다. CSS는 전역적으로 관리해야 하며, nesting 등이 없어 불편하다. 스타일 컴포넌트는 props를 통해 각자 다른 스타일도 줄 수 있고 현재 사용 중인 스타일만 DOM에 포함하기 때문이다. 그리고 class를 지정해주지 않아도 된다!(나한텐 이게 크다)

컴포넌트 전체에 지정해줄 각 브라우저별 기본 스타일의 초기화(user agent stylesheet)와 기본 설정을 해주기 위해 GlobalStyle.tsx를 만들어주겠다.
초기화 해주기 위한 reset 패키지를 설치

npm i styled-reset

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset';

const GlobalStyle = createGlobalStyle`
  ${reset}
  * {
    box-sizing: border-box;
  }
  body{
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif;
    color: #222222;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  input, button {
    background-color: transparent;
    border: none;
    outline: none;
  }
  ol, ul, li {
    list-style: none;
  }
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
`;

export default GlobalStyle;

이렇게 GlobalStyle을 만들어주고, 공통으로 쓰일 스타일들을 정하여 필요한곳에서 사용할 수 있는 theme를 만들어주자.

const color = {
  logo: '#41B979',
  main: '#34ca7a',
  white: '#FFFFFF',
  black: '#222222',
  text: '#858080',
  border: '#ddd',
};

const theme = {
  color,
};

export default theme;

이렇게 간단한 theme를 만들어주고, 공통으로 쓰이거나 많이 쓰이는 스타일을 여기서 구현하면 된다.
그리고 이 GlobalStyle과 theme를 index.tsx에 적용해준다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import Router from './Router';
import GlobalStyle from './styles/GlobalStyle';
import theme from './styles/theme';

const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <ThemeProvider theme={theme}>
    <Router />
    <GlobalStyle />
  </ThemeProvider>,
);

ThemeProvider를 사용하여 theme를 전역적으로 뿌려줄 수 있게 해주고, GlobalStyle을 넣어주면 된다.

다음 시간엔 전체적인 레이아웃을 잡고, 비즈니스 로직을 작성하면서 테스트 코드를 작성하는 시간을 갖도록 하겠다.