[TIL] React - Styled Components

JongYeon·2025년 1월 27일

React

TIL

목록 보기

26/69

styled components

리액트에서 css in JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지

CSS in JS

자바스크립트 안에 css가 있는 형태
백틱 사용

사용하는 이유

특정 조건이나 로직을 적용할 수 있다.

styled components 패키지 설치 방법

vscode 터미널에 yarn add styled-components 입력 후 Enter

import styled from "styled-components" 필수!!

예시 코드

import React from "react";
import styled from "styled-components";

//styled components 생성
//스타일된 div를 생성
const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin: 20px;
`;

const App = () => {
    return (
        <>
            <StBox>박스</StBox> //적용
        </>
    );
};

export default App;

props의 개념을 더한 조건부 스타일링

import React from "react";
import styled from "styled-components";

const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid ${(props) => props.borderColor};
    margin: 20px;
`;

const App = () => {
    return (
        <>
            <StBox borderColor="red">빨간 박스</StBox>
            <StBox borderColor="green">초록 박스</StBox>
            <StBox borderColor="blue">파란 박스</StBox>
        </>
    );
};

export default App;

${(props) => props.borderColor};를 통해 borderColor 가 red일 경우에는 빨간 border가, blue일 때는 파란 border가 green일 때는 초록 border가 입혀진다.

리팩토링

<StBox>가 반복되서 나오는 부분을 리팩토링한다.

boxList를 만들어서 각각의 색을 넣어준다.
switch문을 사용해 해당 되는 색깔에 문구가 뭐로 나올지 결정해준다.
map메서드를 사용해 boxList를 순회하고 getBoxName에 인자로 boxList를 넣어 색깔을 하나하나 순회하며 어떤 문구가 올지 결정해준다.

⭐map메서드를 사용할 때 key 값을 넣어주는 것을 잊지말자!!!

import React from "react";
import styled from "styled-components";

const StBox = styled.div`
    width: 100px;
    height: 100px;
    border: 1px solid ${(props) => props.borderColor};
    margin: 20px;
`;

const boxList = ["red", "green", "blue"];

const getBoxName = (color) => {
    switch (color) {
        case "red":
            return "빨간 박스";
        case "green":
            return "초록 박스";
        case "blue":
            return "파란 박스";
        default:
            return "검정 박스";
    }
};

const App = () => {
    return (
        <>
            {boxList.map((boxColor) => {
                return (
                    <StBox key={boxColor} borderColor={boxColor}>
                        {getBoxName(boxColor)}
                    </StBox>
                    //리팩토링 하기 전 코드
                    {/* <StBox borderColor="red">빨간 박스</StBox>
						            <StBox borderColor="green">초록 박스</StBox>
						            <StBox borderColor="blue">파란 박스</StBox> */}
                );
            })}
        </>
    );
};

export default App;