React - 9장 : 컴포넌트의 스타일링

<리액트를 다루는 기술>

React - 1장 : React 이해

React - 2장 : JSX

React - 3장 : 컴포넌트

React - 4장 : 이벤트 핸들링

React - 5장 : ref. DOM에 이름 달기 

React - 6장 : 컴포넌트 반복
React - 7장 : 컴포넌트의 LifeCycle
React - 8장 : React Hooks 총정리

React - 9장 : 컴포넌트의 스타일링(현재)

 

리액트에서 컴포넌트를 스타일링 할때는 다양한 방식을 사용한다. 여러 방식 중에서 정해진 것은 없지만 자주 사용하는 방식을 알아보자. 어차피 css에 대한 포스팅은 아니므로 빠르게 넘어간다.

9-1. 일반 css (제일 많이 사용)

- .css파일을 별도로 생성하여 사용한다. 별거 없다. 

- 이름 짓는 규칙 : BEM을 주로 사용한다 (.card_title-primary 같이)

 

9-2. Sass

- 별도의 추가설정 없이 CRA 에서 사용 가능하다.

9-3. CSS Module

- 파일이름.module.css 확장자로 파일을 저장하기만 하면 모듈이 적용된다.

- 파일이름_클래스이름_해시값의 형태로 자동으로 클래스를 생성해주므로 중첩현상을 방지할 수 있다.

.wrapper {
background: black;
padding: 20px;
}

/*글로벌 css를 작성하고 싶다면*/
:global .something{
color: aqua;
}

- 직접 불러온 컴포넌트 내부에서만 작동한다.

const CSSModule = ()=>{
  return(
    <div className={`${styles.wrapper} ${styles.inverted}`}>
      .wrapper와 .inverted 적용
    </div>
  )
}

export default CSSModule;

9-4. styled-components

- 라이브러리이다.

- yarn add styled-components

- 상남자/상여자는 그냥 css/scss 파일 만들어서 쓰자.