[React.js] 단숨에 스타일링 익히기 :: styled-components

SCSS 같은거라 보면 돼요.
설치할께요.

npm install --save styled-components

상속도 되고 구조화도 가능해요.
종합 예제를 만들어봐요.

import styled, { css } from 'styled-components';

const BoxParent = styled.div`
    padding: 50px;
`;

const Box = styled(BoxParent)`
    background-color: ${(props) => props.bgColor};
    color: red;

    // &는 this와 같은 의미
    & > div {
        color: blue;
        ${(props) => props.bgColor === 'grey' && css`
            color: yellow;
        `}
    }
`;

function App() {
    return (
        <>
            <Box bgColor="yellow">
                Hello World
                <div>Hello World</div>
            </Box>
            <Box bgColor="grey">
                Hello World
                <div>Hello World</div>
            </Box>
        </>
    );
}

export default App;

Box는 div 컴포넌트인 BoxParent를 상속받아서 패딩이 50px인 div에요.
props 속성도 있어서 재사용이 가능하고, 자신 아래의 컴포넌트에 스타일을 별도로 적용할 수도 있어요.

더 궁금하면 아래 페이지를 방문하세요.
https://styled-components.com/