리액트에 style 적용하는 방법 2가지

안녕하세요. 루루개발자 입니다.

이번 시간에는 리액트에서 style 을 적용하는 방법 2가지에 대해 알아보겠습니다.

 

CSS Module 

[ 정리해보기 ]

리액트에 css 를 적용하는 방법 중 하나가 CSS Module 방식이라고 합니다. "파일명.module.css" 으로 이름을 짓고, 해당 파일을 다음과 같이 컴포넌트 파일 상단에 import 해주는 방식입니다. 예제 코드는 아래와 같습니다.

 

<my-component.module.css>

ul.list {
  margin: 0;
  padding: 0;
}

ul.list > li.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: rgb(0, 255, 140);
}

ul.list2 {
  margin: 0;
  padding: 0;
  border: 1px solid #ccc;
}
ul.list2 > li.item {
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: rgb(255, 0, 0);
}

<my-component.jsx>

 

 

import styles from './my-component.module.css';

export const MyComponent = () => {
    return (
    	<div>
            <ul className={styles.list}>
                <li className={styles.item}>
                    1
                </li>
            </ul>
            <ul className={styles.list2}>
                <li className={styles.item}>
                    2
                </li>
            </ul>
        </div>
    )
}

위 상태에서 styles 를 console.log 에 찍어보면 다음과 같이 표시됩니다.

이렇게 css 파일에 작성했던 선택자들이 object 의 key 형태로 제공됩니다. 결과는 다음과 같습니다.

 

[ 생각해보기 ]

css 파일을 별도로 분리하여 style 과 view 를 분리할 수 있다는 점에서 이 방법은 마음에 드네요. 그리고 위의 예제에서 css 파일에서 정의한 item 클래스는 엄연히 2종류이나 styles 에는 item 하나밖에 표시되지 않습니다. 이 때문에 저는 부모 클래스가 다르더라도 자식 클래스명은 중복이 되면 안되는 제약이 존재하는줄 알았지만, 위의 예제대로 테스트를 진행해보니 정상적으로 css 가 적용되는 것을 확인 할 수 있었습니다. 클래스명을 element 에 적용할 때 객체의 키를 넣어주어야 한다는 점이 살짝 번거로울 수는 있어도 css 파일 자체를 따로 분리 할 수 있다는 점에서 선호하는 방식입니다.

 

 

Styled JSX

[ 정리해보기 ]

컴포넌트내에서 style 태그로 스타일을 작성하는 방법이라고 합니다. 예제는 다음과 같습니다.

 

<my-component.jsx>

export const MyComponent = () => {
    return (
    	<div>
            <ul className="list">
                <li className="item">
                    1
                </li>
            </ul>
            <ul className="list2">
                <li className="item">
                    2
                </li>
            </ul>
            <style jsx>{`
                ul.list {
                    margin: 0;
                    padding: 0;
                }

                ul.list > li.item {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    background-color: rgb(0, 255, 140);
                }

                ul.list2 {
                    margin: 0;
                    padding: 0;
                    border: 1px solid #ccc;
                }
                ul.list2 > li.item {
                    margin: 0;
                    padding: 0;
                    list-style-type: none;
                    background-color: rgb(255, 0, 0);
                }
            `}</style>
        </div>
    )
}

위와 같이 View 와 Style 이 한 곳에 공존하는 구조가 됩니다. 결과는 CSS Module 방식 때의 예제와 같습니다.

 

[ 생각해보기 ]

css module 방식은 element 에 class 적용시 객체의 키를 넣어주어야 했지만, styled jsx 방식은 바로 클래스명을 넣어주면 되기 때문에 클래스를 적용하는 것은 더 편하다고 느꼈습니다. style 이 아주 적게 들어가는 컴포넌트라면 이 방식을 적용하는 것도 괜찮을 수 있다는 생각이 드네요.

 

 

마치며

사실 이 밖에도 리액트에 style 을 적용하는 방법은 다양합니다만, 여기서는 위 2가지 방법만 소개해드렸습니다.

 

읽어주셔서 감사합니다. :)

 

 

 

 

<참고>

https://velog.io/@sorious77/React-CSS-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

React에 CSS를 적용하는 여러 방법