[React] React 스타일링 하는 방법 3개 (인라인&일반CSS, styled-components, CSS 모듈)

리액트를 스타일링하는 방법으로는 3개가 존재한다.

인라인&일반CSS는 논외로 치고,

보통 styled-components 와 css module를 많이 비교하는데,

해외 사이트에서 비교한 글들을 몇개 가져와 보았다.

https://reactjsexample.com/performance-comparison-of-css-in-js-libraries/

Performance Comparison of css-in-js Libraries

 

https://dev.to/alexsergey/css-modules-vs-css-in-js-who-wins-3n25

 

위 링크는 의견을 말하지는 않았지만, styled-components 이 성능이 좋다는 자료를 제시하고있고,

아래 링크는 게시자는 css module을 추천하고있고, 댓글들은 의견이 분분하다.

 

내가 두개를 써보면서 느낀 주관적인 느낌은,

공부하는 단계에서는 뭘 사용하던 상관없고, 둘다 다룰줄 알면 좋다인거 같다.

사실 공부하는 단계에서 미세한 성능차이는 상관이 없다 생각하고..(어느 쪽이 더 성능이 좋은지만 알아두면 된다 생각함)

검색해도 의견이 분분할 정도면 어느쪽을 선택하여도 문제가 없다는 생각이다.

 

하나하나 살펴보면서 자세히 알아보자

 

이 글에서 알아볼 것

• 인라인&기본 CSS
• styled-components
• CSS Module

 

1. 인라인&기본 CSS

• 인라인 스타일
  • <label style={{ color: !isValid ? "red" : "black" }}>
  • 위의 코드에서 알수있듯이 요소의 style 속성을 사용하는데, 이때 값으로 객체를 갖는다.
  • 이 방법은 사용할 수 있지만, 권장되지 않는다..
• 기본 CSS
  • 기존에 하던 방법과 동일하다
  • 또한 동적으로 설정도 가능하다
    • <div className={form-control ${!isValid ? "invalid" : ""}}>
  • 다만, 이 방법은 css가 공유된다
    • 즉, 다른 컴포넌트더라도 같은 클래스명이라면 같은 스타일이 적용된다

 

2. styled-component

• 일반 CSS와 달리 styled-components로 감싸진 부분만 스타일의 영향을 받는다
• 사용법
  1. npm install —save styled-components 로 패키지를 설치한다
  2. 이 기능을 사용할 컴포넌트에 import styled from "styled-components”
  3. const Wrapper = styled.html요소`css코드~`
  4. Wrapper로 컴포넌트 return문의 코드들 감싸줌
• styled-components 동적 스타일링
  1. 위의 사용법대로 설정하고
  2. <FormControl invalid={!isValid}>
     • 위처럼 커스텀 props를 설정한다
  3. styled-components의 props을 활용한다

& label {
    color: ${(props) => {
      return props.invalid ? "red" : "black";
    }};
  }

여기서 props는 해당 스타일컴포넌트의 모든 props을 받아온다

 

 

3. CSS Module

• 일반 CSS와 달리 css파일이 임포트된 컴포넌트에서만 스타일이 영향받는다
• 사용법
  1. CSS 파일명 사이에 .module을 붙인다
     • Button.module.css
  2. import styles from “css파일경로”
  3. className={styles.클래스명}
     • 만약 클래스명이 한단어가 아니라면, className={styles[”클래스-명”]} ,처럼 설정해야한다
• 동적 스타일링
  • 백틱을 활용
    • <div className={`${styles.기본클래스명} ${!isValid && styles.동적클래스명}`}>

 

나는 개인적으로 styled-components를 선호한다

왜냐하면 css 파일을 따로 작성할 필요가 없다는 점과,

동적 스타일링 방식이 마음에 들기 때문이다.

 

하지만, 두 방법 모두 익숙하게 만드는 것이 제일 좋을것이다.