[styled-components] styled-components란?

🎯 styled-components란?

• 자바스크립트 파일 안에 스타일을 정의하고, React 컴포넌트처럼 활용할 수 있다.
• 자바스크립트 코드와 긴밀히 연계하여 다양한 코드를 작성할 수 있다. (변수 생성, 반복문, 조건문, 함수, 모듈)
• 별도의 CSS 파일을 만들지 않고 하나의 파일 안에 스타일을 관리하고 싶을 때 유리하다.
• 스타일 코드와 컴포넌트 코드 간의 결합을 나누고 싶을 때 유리하다.
• tagged template literal이라는 문법을 활용할 수 있다.
• CSS 코드에 post-css, minification, Sass 적용할 수 있다.
• CSS 코드를 겹치지 않게 처리해준다.
• 클래스 이름 자체가 hash다. ⇒ 겹치지 않는다. 해당 컴포넌트에만 스타일 적용된다.

 

📝 styled-components 예시 1

const Container = styled.div`
    width: 400px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.3);
`;

const Button = styled.button`
    background: orangered;
    color: white;
    padding: 12px 40px;
    border: none;
`;

function Sample() {
    return (
    <Container>
        <Button>Submit</Button>
    </Container>
    );
}

 

📝 styled-components 예시 2

const Button = styled.button`
    background: ${({ clicked }) => (clicked ? "orangered" : "lavender")};
    color: ${({ clicked }) => (clicked ? "lavender" : "orangered")};
    padding: 12px 40px;
    border: none;
`;

function Sample() {
    const [clicked, setClicked] = useState(false);

    return (
        <Container>
            <Button onClick={() => setClicked((bool) => !bool)} clicked={clicked}>
                Submit
            </Button>
        </Container>
    );
}

• 원래 버튼에는 clicked라는 속성이 없지만 styled-components에서 clicked 변수를 활용해서 특정 스타일 처리를 토글링 해줄 수 있다.
• 이렇게 안 해주면 순수 css에는 클래스명을 주고 빼고 하는 등의 처리를 해줘야 된다. ⇒ 추상화가 덜 된 느낌

 

📝 styled-components 예시 3

const List = styled.ul`
    display: flex;
    flex-direction: column;
`;

const ListItem = styled.li`
    padding: 20px 100px;
    background: orangered;
    color: white;

    & + & {
    margin-top: 8px;
    }
`;

function Sample2() {
    return (
        <List>
            <ListItem>List one</ListItem>
            <ListItem>List two</ListItem>
            <ListItem>List three</ListItem>
        </List>
    );
}