[React] 컴포넌트로 CSS Style 적용하기 (styled-components)

---

---

안녕하세요. React 에서 CSS Style을 컴포넌트로 구현해서 사용하는 법을 알아보겠습니다.

CSS 를 컴포넌트로 사용할 경우, 스타일을 하나의 파일에서 관리할 수 있는 장점과

최상담 컴포넌트에서 import 하여 하위 컴포넌트로 상속시킬 수 있는 장점이 있습니다.

 

CSS 컴포넌트를 생성하기 위해서는 "styled-components" 라이브러리를 활용해야 하는데요,

먼저 아래 명령어를 통해 라이브러리를 설치해줍니다.

 

>> npm install styled-components

 

설치 후, package.json 파일에서 설치 확인을 해줍니다.

 

 

 

1. CSS Style Component 생성

설치한 styled-components 라이브러리를 활용해 CSS 컴포넌트를 생성해보겠습니다.

해당 라이브러리를 import 한 뒤, 컴포넌트 명을 export 해줍시다.

아래와 같이 코드를 작성하고 CSS 를 작성 부분은 백틱(`) 으로 감싸줍니다.

 

import { styled } from "styled-components";

export const AppStyle = styled.div`
  height: 100%;
  
  .blue-btn {
    margin: 20px;
    background-color: #6aafe6;
    color: #d4dfe6;
    border-radius: 10px;
  }
  `;

 

 

 

2. CSS Style Component 활용

위에서 생성한 CSS 컴포넌트를 활용할 때는 여느 컴포넌트처럼 JSX 부분에 태그 형식으로 사용하면 됩니다.

생성한 CSS 컴포넌트를 imort 하고, <AppStyle> 태그로 활용하면 됩니다.

 

해당 소스에서는 컴포넌트 최상단(~/src/index.js)에서 Style을 적용하고 하위 컴포넌트에서 상속받아

사용 가능하도록 구조를 설계하였습니다. 이에 CSS Style은 AppStyle.js 파일에서 모두 관리할 수 있고, 

하위 컴포넌트에서 별도로 AppStyle 컴포넌트를 import 하지 않아도 사용가능한 장점이 있습니다.