CSs in Js

Css-in-Js는 자바스크립트 파일 안에서 css를 작성할 수 있는 방법입니다.

Css-in-Js는 js파일 안에서 css 코드를 작성하기 때문에 css의 변수와 함수를 그대로 사용할 수 있습니다. 그리고 css 클래스면을 해시 값으로 자동으로 생성하여 클래스 이름 작명에 대한 고민의 수고가 덜합니다. 또한, 현대웹은 컴포넌트 기반으로 발전해 나가기 때문에 컴포넌트와 스타일을 하나의 파일에서 작성하는 Css-in-Js는 모듈화가 수월해집니다.

스타일드 컴포넌트의 특징

css.Sass에서는 별도의 css, sass 파일을 생성하며 js파일에 import해서 사용했지만, 스타일드 컴포넌트는 스타일링을 할 때 ES6의 Tagged Templeate Literal 문법을 이용하여 js파일 안에서 선언해서 사용할 수 있습니다.

import React from 'react';
import styled from 'styled-components'; // 1

const App = () => {
 return <App>Hello React</App> // 2
}

// 3
const App = styled.h1`
	font-size: 30px;
    color: blue;
    text-align: center;
`;

export default App;

1. styled-components 를 사용하기 위해서 스타일드 컴포넌트의 styled를 import 해준다.
2. 처럼 html 태그와 유사한 형태로 컴포넌트를 만들어서 html 태그처럼 선언한다. 그래서 선언해준 html 태그가 가지고 있는 속성을 스타일드 컴포넌트로 선언한 컴포넌트에도 적용할 수 있습니다.

ex)

3. css 속성을 정의합니다.

const [컴포넌트명] = styled.[html태크]`
	[부여하고자 하는 css 속성]
`;

ThemeProvider

sass에서는 변수와 mixin 등 공통으로 사용할 스타일에 대해서 파일을 만들고, 사용하고자 하는 scss파일에 import를 해서 적용을 시켰다. 하지만 매변 import를 해주고, 참조해야 하는 css파일이 많아지면 의존성을 관리하기도 힘들어진다. 이런 문제들을 해결하기 위해서 스타일드 컴포넌트에서는 ThemeProvider를 통해 전역으로 테마, js변수 들을 공유하여 사용한디.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme={theme}>
    <GlobalStyle />
    <Router />
  </ThemeProvider>
);

Theme

color, fontsize등 공통된 테마는 theme.js에서 선언하여 각 컴포넌트에서 props로 받아 스타일을 적용할 수 있습니다. themeprovider의 속성으로 넘겨주면 전역에서 사용할 수 있습니다.

const theme = {
  black: '#000000',
  white: '#FFFFFF',
  lightGrey: '#B0B0B0',
  middleGrey: '#717171',
  deepGrey: '#222222',
  hoverGrey: '#DBDBDB',
};

export default theme;

--------------------------

const App = () => {
	return <Container>title</Container>;
}

const Container = styeld.div`
color: ${props => props.theme.lightGrey}
`

전역적으로 사용하기 위한 theme.js 파일을 만들고, 해당파일을 index.js에서 ThemeProvider를 통해 설정해주면, 위의 예시처험 props로 받아와서 사용할 수 있습니다.

mixin

자주 사용하는 css 스타일에 대해서는 variables.js 파일을 별도로 생성하여 사용하는게 좋습니다. variables.js파일을 theme과 variables를 Theme Provider에 같이 prop으로 합쳐서 전역에서 사용하거나, 사용하고자 하는 파일에서만 import해서 mixin을 사용할 수 있습니다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ThemeProvider theme={{ style: theme, variables }}>
    <GlobalStyle />
    <Router />
  </ThemeProvider>
);

// App.js

const App = () => {
  return (
    <Container>
      <Button>첫번째 버튼</Button>
      <Button>두번째 버튼</Button>
    </Container>
  );
};

const Container = styled.div`
  ${(props) => props.theme.variables.flexSet()} 
`;  // a

const Button = styled.button`
  background-color: ${(props) => props.theme.style.lightGrey};
`;

export default App;

variables.js 파일에서 기본으로 설정한 값을 사용할 때는 flexSet()을 써주고, 다른 인자를 넘겨줄때는 ${props => props.theme.varuables.flexSet('','space-between','center') 처럼 적용하고 싶은 인자를 넘겨줄 수 있습니다.