CSS In JS

스타일링을 위해 CSS를 작성하는 것에는 많은 방법이 있다. 잘 아는 방식인 css 파일에 작성할 수도 있고, html에 인라인으로 작성할 수도 있다.

CSS In JS는 CSS를 자바스크립트 파일, 즉 리액트에서는 컴포넌트안에 작성하는 것이다.

styled-components

styled-components 는 CSS In JS를 구현하는 대표 라이브러리이다.

styled-components를 사용할 경우 다음과 같은 이점이 있다.

1. 실제로 렌더링에 필요한 CSS만 코드에 삽입하여 사용자의 코드 로드 부하를 줄일 수 있다.
2. 유니크한 클래스 이름을 생성하여 클래스 이름이 중복되거나, 오타가 나는 경우를 없애준다.
3. 여기저기 얽혀 있는 CSS 코드의 삭제를 쉽게 해준다.
4. 쉬운 동적 스타일링이 가능하다.
5. 간편한 유지 관리가 가능하다.

사용 준비

패키지 설치

yarn add styled-components

플러그인 설치 (Optional)

VSCode를 사용할 경우 다음 플러그인을 사용하면 좀 더 편하게 스타일 코드를 작성할 수 있다.

사용

styled-components는 자바스크립트의 템플릿 리터럴을 활용하여 작성한다.

// html style
const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`

// 기존 컴포넌트 style
const NewButton = styled(Button)`
	color: blue
`

styled-components 에서는 기본적으로 선택자를 사용할 필요가 없으며, 자신의 하위 항목을 가리킬 때는 자기 자신을 가리키는 & 예약어를 사용한다.

어떻게 작성하던 결국에는 리액트에서 사용 가능한 새로운 컴포넌트로 반환이 된다.

props 사용

styled-components 에서도 props를 사용할 수 있다.
일반 컴포넌트에서 사용하던 것처럼 props라는 인자에서 내려주는 값을 받아온다.

const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: ${props => props.invalid ? "red" : "#8b005d"};
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`

return (
	<Button invalid={!isValid} />
)

GlobalStyles (전역 스타일링)

요소들에 공통적으로 들어가야할 CSS를 작성해야 하는 경우가 있다. styled-components는 전역 스타일링도 지원을 한다.
styled-components의 createGlobalStyle를 이용하여 컴포넌트를 생성한다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

사용할 때는 공통적인 부분이 적용되야 할 부분에 생성된 styled component를 사용해주면 된다.

import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;