[React] styled-components로 React 컴포넌트를 스타일링하자

▶styled-components로 React 컴포넌트를 스타일링하자

이번 글에서는 CSS-in-JS 라이브러리인 styled-components를 사용하여 React 컴포넌트를 스타일링하는 방법을 살펴보겠습니다.

 

🔎 CSS in JS ?

---

먼저 CSS in JS 개념에 대해 알아보려고 합니다.

CSS in JS는 스타일 정의를 CSS 파일이 아닌 Javascript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법을 의미합니다.

 

HTML, CSS, Javascript는 각자 별도의 파일에 두는 것과 대비하여

여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, Javascript를 몽땅 포함시키는 것인데요.

 

React는 JSX를 사용해서 이미 Javascript가 HTML을 포함하고 있는 형태를 취하고 있죠?

여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 Javasciprt에 삽입할 수 있는 것입니다.

 

🔎 styled-components 기본

---

styled-components는 CSS-in-JS 라이브러리 중에서 가장 널리 사용되고 있는 라이브러리인데요.

 

📌 패키지 설치

$ npm i styled-components

 

📌 기본 문법

위에서 설치한 styled-components 패키지에서 styled 함수를 import합니다.

styled는 HTML 엘리먼트나 React 컴포넌트에 원하는 스타일을 적용하기 위해 사용합니다.

 

즉, styled를 사용하여 스타일이 적용된 태그를 만들어내게 됩니다.

import styled from 'styled-components';

const Div = styled.div`
  // <div> HTML 엘리먼트에 대한 스타일 정의
`;

css 파일에서 스타일을 주듯이 여러 항목을 작성해주면 됩니다.

작성해 준 후로는 return() 안에서 엘리먼트를 사용하듯이 사용해 주면 됩니다.

function Test() {
  return(
    <Div></Div>
  )
}

 

🔎 중복된 부분 처리

---

간혹 styled-component를 작성하다보면 분명히 중복적으로 작성하게 되는 부분이 있습니다.

예를 들면 화면 가운데로 컴포넌트를 놓는 flex 스타일 ?

 

이 중복되는 부분을 처리하는 부분에 대해 처리를 해 놓으면 코드를 훨씬 줄일 수 있겠죠?

 

✨ 자주쓰는 스타일들을 따로 정의해서 모아놓고 쓰자

프로젝트 폴더에서 src 폴더 안에 styles 폴더를 하나 만들어줍니다(src/styles/)

여기에서 따로 스타일들을 관리해 줄 것입니다.

예시

자주 쓰는 스타일은 크게 3가지로 볼 수 있습니다.

• 위치, 크기, 정렬 관련 스타일
• 모든 컴포넌트에서 적용해야 하는 스타일(ex. 배경색, button에 border 없이)
• 테마색, 폰트 사이즈, 글씨 굵기

 

위 부분에 대하여 묶어서 관리를 해 주는 것인데요.

파일 관리

1️⃣ 위치, 크기, 정렬 관련 스타일 - css

여러 파일에서 스타일 컴포넌트를 작성하다 보면 특히 화면 중앙에 배치하는 flex 스타일을 정말 많이 작성하곤 하는데요.

저는 이 부분을 common.js 파일에 미리 작성을 해놓고 필요하면 import하여 사용하려고 합니다.

그리고 추가적으로 자주 사용하는 스타일 해당 파일에 미리 작성해 놓도록 하겠습니다.

 

📄 src/styles/common.js 파일

import { css } from 'styled-components';

export const flexCenter = css`
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const flextAlignCenter = css`
  display: flex;
  align-items: center;
`;

export const title = css`
  font-size: 48px;
  line-height: 16px;
  font-weight: bold;
`;

사용할 때는 아래와 같습니다.

import { flexCenter } from '../../styles/common';

// ...

const Wrapper = styled.div`
  width: 100%;
  height: calc(100vh - 60px);
  padding-bottom: 60px;
  ${flexCenter};
  flex-direction: column;
`;

위 처럼 스타일 컴포넌트 코드 중간에 ${정의해놓은 스타일이름}을 작성하여 바로 사용해 주면 됩니다.

이렇게 재활용을 함으로써 3줄을 1줄로 줄일 수 있었습니다.

 

2️⃣ 모든 컴포넌트에서 적용해야 하는 스타일(ex. 배경색, button에 border 없이) - createGlobalStyled

이번에는 바로 App.js에 적용합니다.

따라서 모든 컴포넌트 하나의 컴포넌트도 제외하지 않고 모든 곳에 적용해야 하는 스타일을 미리 지정해 주려고 합니다.

 

이때는 createGloblaStyled를 사용해야 합니다.

이때 추가적으로 styled-reset 패키지의 reset을 사용하려고 하는데요.

 

❓ styled-reset

styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 패키지입니다.

즉, 기본 제공 스타일을 초기화시켜 호환성을 맞춰줍니다.

npm i styled-reset 하여 패키지를 설치합니다.

 

📄 src/styles/global.js 파일

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

const GlobalStyles = createGlobalStyle`
    ${reset}
    * {
        box-sizing: border-box;
    }

    body {
        background-color: #e7e7e7;
    }
    button {
        border: none;
    }
`;

export default GlobalStyles;

사용할 때는 주로 App.js에서 import 하여 BrowserRouter 바로 아래에 딱 한 줄만 추가해 주면 됩니다.

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

import GlobalStyles from './styles/global';

function App() {
  return (
      <BrowserRouter>
        <GlobalStyles /> // 여기 추가!
        <Routes>
        </Routes>
      </BrowserRouter>
  );
}

export default App;

 

3️⃣ 테마색, 폰트 사이즈, 글씨 굵기 - ThemeProvider

이번에는 프로젝트를 진행할 때 테마색이 있죠?

예를 들어 네이버의 초록색, 유튜브의 빨간색 처럼요!

이런 색을 프로젝트를 진행하다보면 굉장히 많이 사용할 것입니다.

사용할 때마다 #ffffff ... 이런식으로 rgb코드를 작성하는 게 굉장히 번거로울 것입니다...

 

따라서 이러한 rgb코드들을 파일에 모아놓고 쉽게 사용할 것인데요.

뿐만 아니라 폰트 사이즈나 굵기들도 미리 팀에서 정해놓고 사용할 수도 있습니다.

 

📄 src/styles/theme.js 파일

const PALETTE = {
  primary: {
    100: '#CCFFF9',
    200: '#00E5C9',
    300: '#00C7AE',
  },
  subColor: '#EBF1F4',
  fontColor: '#FFFFFF',
  error: '#FF0000',
  white: '#FFFFFF',
  black: '#000000',
  gray: {
    100: 'E9E9E9',
    200: '#D9D9D9',
    300: '#656565',
  },
};

const FONT_SIZE = {
  small: '14px',
  medium: '18px',
  large: '20px',
};

const FONT_WEIGHT = {
  thin: '100',
  reguler: '400',
  bold: '800',
};

// 하나로 묶어서 객체화
const theme = {
  PALETTE,
  FONT_WEIGHT,
  FONT_SIZE,
};

export default theme;

 

지금 정의한 테마색들은 전역으로 관리가 되어야겠죠?

 

따라서 이번에도 App.js로 가서 ThemeProvider를 사용합니다.

 

❓ ThemeProvider

ThemeProvider는 전역으로 theme의 스타일을 사용할 때 이용합니다.

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

import { ThemeProvider } from 'styled-components'; // 여기 추가!!!
import GlobalStyles from './styles/global';

import HomePage from './pages/Home';
import { TodoPage } from './pages/Todo';
import theme from './styles/theme';

function App() {
  return (
    <ThemeProvider theme={theme}> {/* 여기에 추가!!! */}
      <BrowserRouter>
        <GlobalStyles />
        <Routes>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default App;

이제 실제로 이 테마색을 필요할 때 마다 import 없이 사용하는 방법은 아래와 같습니다.

// ...
background-color: ${({ theme }) => theme.PALETTE.primary[300]};
// ...

 

---

📌 알아두면 좋은 점

1️⃣ styled-components 자동완성 플러그인

JSX 파일에서 styled-components를 사용하다보면 자동완성이 없어 오타없이 스타일 명칭을 작성하고 또 적용해야 합니다.

그런데 자동완성을 제공하는 VS Code 플러그인이 있습니다.

vscode-styled-components

 

2️⃣ styled-comonents가 길어지면 파일 맨 아래로 내리자

styled-components의 개수가 늘어나면서 길어지면 정작 제일 중요한 컴포넌트 함수 코드를 보기 힘들어지겠죠?

그렇기 떄문에 보통 styled-components는 파일 제일 아래에 작성해 주어도

위에 있는 return문 안에서 사용 가능하므로 스타일 컴포넌트는 파일 맨 아래에 작성해 주는 것이 일반적이라고 합니다!

길어지는 스타일 컴포넌드들