TIL-2024.05.01 - React - 007. CSS-Module & Styled Component

 

 

 

 

질문

1. React에서 CSS를 맥이는 방법이 뭐가 있을까? 

2. CSS-in JS가 뭐야? 

 

 

CSS-Module

- CSS Modules는 CSS 파일을 모듈로 취급하여 클래스 이름을 고유하게 만들어주는 기술

- 각각의 클래스는 로컬 범위를 가지고 있어서, 전역 스코프에 영향을 받지 않으므로 클래스 이름 충돌 문제를 해결 가능.

 

 

예제

import React from 'react';
import styles from "../../assets/styling/3-css-module/CSSModule.module.css";

/*
* CSS MODULE 은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값으로 설정
* [파일 이름]_[쿨래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지
* */

const CSSModule = () => {
    return (
        <div className={`${styles.wrapper} ${styles.inverted}`}>
            안녕하세요 저는
            <span className="something">CSS MODULE !</span>
        </div>
    );
};

export default CSSModule;

 

 

 

// CSS

.wrapper {
    background: black;
    padding: 1rem;
    color: white;
    font-size: 2rem;
}

.inverted {
    color: black;
    background: white;
    border: 1px solid black;
}

/* 글로벌 CSS 를 작성하고 싶다면 */
:global .something {
    font-weight: 800;
    color: aqua;
}

 

 

 

Style Component

- JavaScript 파일 내에서 CSS를 작성하는 방식으로, 컴포넌트와 스타일을 강력하게 결합. 

- 이를 통해 컴포넌트 단위로 스타일을 관리하고, 스타일이 컴포넌트와 함께 캡슐화되어 개발자들이 보다 체계적으로 코드를 작성

 

 

예제

import React from "react";
import styled, {css} from "styled-components";

/*
* Styled Component
* JS 파일 안에서 스타일을 선언하는 방식 (CSS-in-JS)
*/

// styled.div 및 styled.button: styled-components의 스타일 컴포넌트를 생성
const Box = styled.div`
    // props 로 넣어준 값을 직접 전달: 컴포넌트의 color 속성을 사용하여 배경색을 지정, color 속성이 지정되지 않았을 경우 기본값으로 'blue'를 사용
    background: ${props => props.color || 'blue'};
    padding: 1rem;
    display: flex;
`;

const Button = styled.button`
    background: white;
    color: black;
    border-radius: 4px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;

    // & 문자를 사용하여 Sass 처럼 자기 자신 선택 가능

    &:hover {
        background: rgba(255, 255, 255, 0.9);
    }

    ${props =>
            // 다음 코드는 inverted 값이 true 일 때 특정 스타일을 부여
            props.inverted &&
            // css 함수:  템플릿 리터럴을 사용하여 스타일을 동적으로 생성.
            css`
                background: none;
                border: 2px solid white;
                color: white;
                // &:hover: 마우스 오버 상태일 때의 스타일을 지정

                &:hover {
                    background: white;
                    color: black;
                }
            `};

    // & + button: 인접 형제 선택자를 사용하여 해당 스타일이 적용된 버튼 다음에 오는 버튼에 대해 추가적인 스타일을 지정

    & + button {
        margin-left: 1rem;
    }
`;


const StyledComponent = () => {
    return (
        <Box color="black">
            <Button>안녕하세요</Button>
            <Button inverted="true">테두리만</Button>
        </Box>
    );
};

export default StyledComponent;

 

 

 

답변

1. React에서 CSS를 맥이는 방법이 뭐가 있을까? 

- CSS-Module 혹은 Style Component로 CSS 맥일 수 있음. 

 

2. CSS-in JS가 뭐야? 

- 스타일을 정의하고 관리하는 방식을 의미.

- 스타일을 JavaScript 객체나 함수로 표현하여 사용하는 방식