스타일링

일반 CSS : 컴포넌트를 스타일링하는 기본적인 방식

Sass : 자주사용회는 CSS전처리기중 하나로 확장된 CSS문법을 사용하여 코드 작성을 도와준다.

CSS Module : 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션, CSS Module이 적용된 파이릉ㄹ 불러오면 객체를 전달받게 되며 CSS Module에서 사용한 클래스 이름과 해당 이르을 고유화한 값이 키 - 값 형태로 들어있다. ex) { wrapper:"CSSModule_wrapper_1SbdQ" }

        <div className={`${styles.wrapper} ${styles.inverted}`}>

위의 코드에서 `(백틱)을 사용하였다.

styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다.

 

 

 

 

 

BEM 네이밍 : CSS방법론 중 하나로, 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식 ex) .card_title-primary

 

@mixin : 믹스인 사용시 재사용되는 스타일 블록을 함수처럼 사용할 수 있다.

 

sass-loder 설정 : create-react-app으로 만든 프로젝트는 프로젝트 구조의 복잡도를 낮추기 위해 세부 설정이 숨겨져 있다. yarn eject를 사용해 세부설정을 꺼낼 수 있다.