[React] Styled Components 사용하기

Styled Components?

styled-components는 CSS in JS를 기반으로 구현된 라이브러리이며, CSS in JS의미는 Javascript 안에 CSS를 작성하는 것이다.

 

styled-components 는 현존하는 CSS in JS 관련 리액트 라이브러리 중에서 가장 인기 있는 라이브러리이다.

 

이번 포스팅 글에서는 styled-components 사용 예제를 간단하게 다루고자 한다.

먼저, styled-components를 다루기 전에 태그에 스타일을 입히는 기존 방법을 살펴보자.

function App() {
  
  return (
    <div className="App" style={styles.divContainer}>Hello World!</div>
  );

}
export default App;

const styles = {
  divContainer: {
    backgroundColor: "#000",
    width: "200px",
    height: "100px",
    fontSize: "24px",
    color: "#fff",
  }
}

위 코드처럼 태그의 style 속성에 객체를 전달하거나 또는 className, id를 정의하고 별도의 css 파일을 만들어 해당 클래스 이름, 아이디를 가진 태그를 디자인 하는 방법으로 진행했다. 이번에는 styled-components를 사용한 예제를 살펴보자.

설치하기

먼저 해당 라이브러리를 사용하기 위해서는 모듈 설치가 필요하다.

• npm install styled-components 명령어를 입력하여 모듈을 설치한다.

모듈 불러오기

import styled from 'styled-components';

위처럼 import를 추가한다.

사용하기

const Div = styled.div`
    background-color: black;
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: white;
  `;

function App() {
  
  return(
    <div>
      <Div>Hello world!</Div>
    </div>
  )

}

결과는 다음과 같다.

styled-components는 style이 적용된 Component를 직접 생성한다.

따라서 태그 스타일을 위한 코드 사용량을 줄일 수 있으며 기존 스타일링 방법인 key: value 형태가 아니라 CSS의 문법을 그대로 사용한다는 장점도 존재한다.

props를 이용한 조건부 스타일링

styled-components의 또 다른 장점은 props를 이용하여 컴포넌트 스타일링을 할 수 있다는 것이다.

return(
    <div>
      <Div bgColor='blue'>Hello world!</Div>
    </div>
  )

위와 같이 Div 컴포넌트 안에 props로 bgColor라는 속성을 추가하고 값은 blue로 지정한다.

그리고 컴포넌트 코드를 다음과 같이 수정한다.

const Div = styled.div`
    background-color: ${props => props.bgColor || 'black'};
    width: 200px;
    height: 100px;
    font-size: 24px;
    color: white;
  `;

이처럼 코드를 수정하면 props가 있는 경우 배경 색상을 props에서 정의한 색으로 변경하며 bgColor 라는 props가 없는 경우에는 default 색상으로 검은색을 적용한다.

실제로 색상이 우리가 정의한 blue로 바뀐 것을 확인할 수 있다.

---

출처

• https://dkje.github.io/2020/10/13/StyledComponents/
• https://styled-components.com/