[React] React 모듈러 Style

인라인 style 방법

 

리액트에서는 아래와 같이 인라인 스타일을 적용시킬 수 있다.

function Button({text}){
    return <button style={{
        backgroundColor: "blue",
        color: "white",
    }}>{text}</button>;
}

 

 

 

모듈러 style 방법

 

리액트는 스타일을 모듈처럼 사용한다. 

create-react-app은 css 코드를 자바스크립트 오브젝트로 변환시켜준다.

 

스타일을 모듈러로 사용하기 위해서는 파일명을 xxx.module.css 로 지어주어야 한다.

아래와 같이 사용할 수가 있다.

 

 

Button.js

function Button({text}){
    return <button className={styles.btn}>{text}</button>;
}

 

 

Button.module.css

.btn{
    color: white;
    background-color: tomato;
}

 

 

 

 

해당 스타일을 개발자 검사 "요소"로 들어가보면

 

스타일이 무작위 값을 가진다는 것을 알 수 있다.

 

 

 

▶모듈러 스타일 방법의 장점

 

- 다른 모듈 안에 같은 클래스 네임을 가지고 있더라도 상관 없이 사용 가능하다.

- 다른 클래스 이름들을 사용하기 위해 기억하고 있지 않아도 된다. (html 상에서 랜덤 클래스 이름 적용.)

 

 

참고로 HTML + CSS3를 사용할 때는 클래스 이름을 모두 다르게 적용해야 한다.

같은 클래스 이름이 서로 다른 스타일 시트에 정의되어 있을 경우,

나중에 로드된 스타일 시트의 규칙이 이전의 규칙을 덮어쓰게 된다. 그래서 클래스 이름이 겹치치 않는 것이 좋다.

코드가 정말 지저분해지기도 한다. 

 

프로젝트에서 코드가 몇 천줄이 넘어갈 때, 중복된 이름이 있어 스타일이 이상하게 적용되었던 경험이 있다..

스타일 이름 안겹치게 하려고 파일을 모두 뒤졌던 경험이 있어서 ㅎㅎ

모듈러 스타일 방법의 장점이 크게 와닿았다!