리액트에서 스타일컴포넌트를 잘 써보자!(+다크모드 ) - 기본셋팅편

chooing·2022년 7월 31일
0

스타일컴포넌트

목록 보기
1/1

시작하기 전에

💥프로젝트를 진행하면서 사용한 스타일컴포넌트에 공부한 내용을 정리한 글로 잘못된 부분 더 나은 방법이 있으면 댓글로 남겨주세요.

본 포스팅에선 스타일 컴포넌트의 이론이라던가 CSS-in-JS, CSS-in-CSS가 무엇인지에 대해선 설명하지 않는다. 오로지 다른 프로젝트에서 활용할 수 있고 사용한 내용에 대해 정리한 내용이다.

스타일 컴포넌트를 사용하기 전에 우선 기초적인 설정이 필요하다. 이런 기본적인 설정을 해두면 반복되는 값에 대해 한 곳에서만 수정하면 되고 코드를 한결 간결하게 해준다.

스타일컴포넌트 설치하기

// npm
npm install styled-components 

// yarn
yarn add styled-components

프로젝트 파일 구조

본 포스팅과 관련없는 폴더, 파일은 생략한 기본 셋팅을 위해 사용되는 파일의 구조이다.

📦src
 ┣ 📁 style
 ┃ ┣ 📜 global.jsx
 ┃ ┣ 📜 theme.js
 ┗ 📜 App.jsx

기본 셋팅 - global.jsx

global.jsx에 프로젝트의 요소들의 기본적으로 적용될 스타일을 작성한다. 여기에 reset과 추가적으로 태그에 지정할 스타일을 적어준다.

1. GlobalStyle 스타일

기본적인 스타일 설정을 적는다. 여기에 reset 스타일을 적어도 좋다.

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
	html{ font-size: 62.5%; }

    a{
        text-decoration: none;
        color: inherit;
    }

    body{
        font-size: 1.6rem;
        line-height: 1.4;
	}
`

2. reset 스타일

개인적인 reset 스타일을 적어도 좋지만 해당 라이브러리를 설치하여 사용할 수 있다.

설치하기

npm i styled-reset

적용하기

설치된 reset 스타일을 가장 상단에 적고 reset 외에도 적용할 기본 스타일을 작성한다.

import { createGlobalStyle } from 'styled-components';
import reset from 'styled-reset'; // reset 스타일 import

const GlobalStyle = createGlobalStyle`
	${reset}

	html{ font-size: 62.5%; }

    a{
        text-decoration: none;
        color: inherit;
    }

    body{
        font-size: 1.6rem;
        line-height: 1.4;
	}
`

커스텀 스타일 - theme.js

theme.js에 프로젝트에 사용할 커스텀 스타일을 추가한다.

커스텀 스타일로는 ir기법이 담긴 CSS를 만들거나 프로젝트의 메인 색상처럼 반복적으로 사용되는 값을 저장하는 등 프로젝트에 사용되는 스타일을 추가하면 된다.

다크모드를 위한 색상도 여기서 작성하면 된다.

//ir 기법
const a11yHidden = () => {
	return `	
        overflow: hidden;
        position: absolute;
        clip: rect(0, 0, 0, 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
    `;
};

// 반응형 사이즈 정의
const size = { 
	mobile: '(max-width: 390px)',
	tablet: '(max-width: 1024px)',
};

// 라이트 모드에서 색상
const lightTheme = {
	mainColor: '#2BC48A',
	subColor: '#333843',
	a11yHidden,
    size,
}

// 다크 모드에서 색상
const darkTheme = {
	mainColor: '#4AD295',
	subColor: '#434B5A',
	a11yHidden,
    size,
}

// 객체로 해당 모드를 각각 담는다.
export default const theme = {
	light: lightTheme,
	dark: darkTheme,
};

만약 다크모드를 사용하지 않는다면 다음과 같이 작성하면 된다.

const a11yHidden = () => {
	return `	
        overflow: hidden;
        position: absolute;
        clip: rect(0, 0, 0, 0);
        width: 1px;
        height: 1px;
        margin: -1px;
        border: 0;
        padding: 0;
    `;
};

// 반응형 사이즈 정의
const size = { 
	mobile: '(max-width: 390px)',
	tablet: '(max-width: 1024px)',
};

//색상 정의
const color = {
	mainColor: '#4AD295',
	subColor: '#434B5A',
}

export default const theme = {
	a11yHidden,
	size,
	color,
};

스타일 전역으로 설정하기 - App.jsx

  • <ThemeProvider theme={theme[mode]}>를 통해 theme.js에서 설정한 커스텀 스타일을 전역적으로 사용할 수 있다.
  • mode의 값을 light 또는 dark로 변경하여 라이트모드 또는 다크모드로 적용하면 된다.
import React, { useState } from 'react';
import { ThemeProvider } from 'styled-components';
import theme from './style/theme';
import GlobalStyles from './style/global';

export default function App() {
	const [mode, setMode] = useState('light');
	return (
		<>
			<ThemeProvider theme={theme[mode]}>
				<GlobalStyles />
			</ThemeProvider>
		</>
	);
}

결론 3줄 요약

  • global.jsx : reset 스타일과 기본적인 태그 스타일을 적는다.
  • theme.js: 프로젝트에서 반복적으로 사용되는 스타일, 값을 적는다.(다크모드 색상도 여기서 설정한다.)
  • App.jsx: ThemeProvider로 작성한 스타일을 전역적으로 설정한다.

이렇게 프로젝트에서 스타일컴포넌트를 사용하기 전 기본적인 셋팅을 해둔다. 다음 포스팅에서 이렇게 설정한 스타일을 사용하는 방법과 활용방법에 대해 적어보려한다.

profile
멋찐 프론트엔드 개발자가 되기 위해 공부 중입니다

0개의 댓글