(4) 지금 바로 React 시작하기 - Styling

• 위니브 엠버서더가 되어 무료로 강의를 제공 받고 후기를 작성한다.
• React 기초 강의에서 등장한 개념을 정리했다.
• https://www.inflearn.com/course/%EC%A7%80%EA%B8%88%EB%B0%94%EB%A1%9C-react/dashboard

 

1. React Styling

• React Styling에 대해서는 unopinionated 이다.
• 그 결과 React에 CSS를 적용하는 방법은 수십가지가 있다.
• 전통적으로는 CSS 파일을 <link>로 불러오는 방법도 가능하다.
• 그러나 React를 사용하는 이상 전통적인 방식보다 더 좋은 접근법이 있다.
• React는 markup(HTML), style(CSS), logic(JS)를 component로 쪼개서 애플리케이션을 구성한다.
• 따라서 Component가 관련된 CSS를 관리하면 CSS 작성이 더 단순해진다.
• CSS를 개선, 변경을 한다고 생각해보자.
  • 기존 디자인은 override
  • BEM (Block Element Modifier)
• 위의 방식은 시간이 갈수록 코드작성이 힘들어진다. →  개발자가 힘들다.
• React 커뮤니티에서는 이를 해결하기 위해
  • styled-components, emotion, vanilla-extract, stitches, etc. 같은 도구가 등장했다.

CSS Module

• 파일 경로를 prefix로 사용해서 BEM을 자동으로 생성해주는 도구

// Sidenote.module.css
.wrapper {
  padding: 24px;
  background-color: hsl(210deg 55% 92%);
  border-left: 3px solid hsl(245deg 100% 60%);
  border-radius: 3px 6px 6px 3px;
}

.title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 4px;
}

// Sidenote.js
import styles from './Sidenote.module.css';

function Sidenote({ title, children }) {
  return (
    <aside className={styles.wrapper}>
      <h3 className={styles.title}>{title}</h3>
      <p>{children}</p>
    </aside>
  );
}

export default Sidenote;

• 자동 생성 되는 이름이 너무 길다? WebPack에서 optimize 해준다.
• 비슷한 도구로 Styled component가 있다.