FrontEnd study React - 03(style)

이번에는 React에서 스타일을 적용하는 방법을 공부해볼 생각입니다. React에서 스타일을 적용하는 방법은 여러가지가 있습니다.

• 가장 기본이 되는 .css 파일에 작성하기
• CSS 모듈 사용하기
• styled-components 사용하기(CSS-in-JS)

외에도 더 있는 것 같지만 저는 여기서 가장 많이 사용한다는 styled-components를 배워보기로 하였습니다.

styled-components 는 css-in-js 방식으로 css를 js파일안에 작성한다는 뜻이라고 합니다. 일단 이 방식을 사용하기 위해서는 styled-components 패키지를 설치해야 합니다.

$ npm i styled-components

설치를 하고나면 이제 사용하고자 하는 .js 파일내에서 import styled from 'styled-components'; 을 추가하는 것으로 사용을 시작하게 됩니다.

// App.js
import React from 'react';
import styled from 'styled-components';

const BaseBox = styled.div`
    width: 100px;
    height: 100px;
`;

const RedBox = styled(BaseBox)`
    background-color: #ff0032;
`;

const BlueBox = styled(BaseBox)`
    background-color: #00eaff;
`;

const GreenBox = styled(BaseBox)`
    background-color: green;
`;

function App() {
    return (
        <div>
            <RedBox />
            <BlueBox />
            <GreenBox />
        </div>
    );
}

export default App;

styled-components의 간단한 사용예 입니다. styled.태그 css 내용을 const에 담아서 컴포넌트처럼 사용할 수 있고, 이를 상속할 수도 있습니다.