리액트 css-in-js 도입하기 with styled-components

 

css-in-js

 

css-in-js는 CSS 코드를 자바스크립트 파일 안에서 작성하는 방식을 의미합니다. CSS 코드가 자바스크립트 안에서 관리되기 때문에 공통되는 CSS 코드를 변수로 관리할 수 있습니다. 또한 동적으로 CSS 코드를 작성하기도 쉽습니다. 

css-in-js를 지원하는 패키지 중에서는 styled-components가 간편하고 인지도가 높은 편에 속합니다. 

 

 

styled-components 

 

위 명령어로 styled-components를 설치한 다음, Box.js라는 이름의 파일을 만들어 함수형 컴포넌트를 만들겠습니다. 그리고 거기에는 스타일도 적용해주도록 하겠습니다. 

import React from 'react';
import styled from 'styled-components';
 
const BoxNormal = styled.div`
  width: 100px;
  height: 100px;
  background-color: tomato;
`;
 
function Box(props){
  return <BoxNormal></BoxNormal>
}
 
export default Box;

CSS 코드를 담고 있는 styled-component 컴포넌트를 만들었습니다. 이렇게 만든 컴포넌트는 일반 리액트 컴포넌트처럼 사용될 수 있습니다. 위의 컴포넌트를 화면에 출력하면 다음과 같은 결과를 확인하실 수 있습니다. 

 

 

 

동적스타일 적용하기

 

이번에는 css-in-js의 장점인 동적 스타일을 적용해보겠습니다. 컴포넌트의 속성값을 매개변수 삼는 화살표 함수를 동적 동작에 이용해보도록 하겠습니다. 

const BoxNormal = styled.div`
  width: ${props => props.size === "big" ? 200 : 50}px;
  height: 100px;
  background-color: tomato;
  margin: 10px;
`;

위 코드는 BoxNormal 컴포넌트에 size라는 속성값이 있다고 가정했을 때, 속성값에 따라 width가 달라질 수 있도록 코드를 작성한 것입니다. 템플릿 문자열에서 표현식을 사용하면 컴포넌트의 속성값을 매개변수로 갖는 함수를 작성할 수 있습니다. 

위 컴포넌트를 아래와 같이 사용하면 박스의 폭이 200px로 조정되는 것을 확인하실 수가 있습니다. 

 

function Box(props){
  return <BoxNormal size={"big"}></BoxNormal>
}