Css 작성방법 결정하기
리액트로 프로그래밍을 할 때는 컴포넌트를 중심으로 생각하는게 좋다
컴포넌트는 서로간의 의존성을 최소화 하면서 내부적으로는 응집도를 높여야 한다,
응집도가 높은 컴포넌트를 작성하기 위해 css 코드도 컴포넌트 내부에서 관리하는게 좋다
일반적인 CSS 파일
일반적인 css 파일도 ESM문법을 이용해서 자바스크립트로 가져올수 있다.
하지만 css 파일 클래스명이 같다면 충돌할수 있다는 단점을 가지고 있다.
css-module로 작성하기
클래스명이 충돌하는 단점을 극복할수 있다. 간결한 클래스 명을 이용하여.
컴포넌트 단위로 스타일을 적용할때 좋다.
CSS파일 명을 다음과 같이 작성하면 CSS-module가된다
{이름}.module.css
Import 할때 import style from ‘./주소’; 형식으로 쓴다.
컴포넌트 안에서는 ‘${style.키값}’ 으로 사용된다.
클래스명에 해시값(__1G41C) 이 들어 있어서 충돌은 발생되지 않는다. 하지만 이 때문에 className속성값을 입력하는 코드가 번거롭기도 하고 가독성도 좋지 않은데 패키지를 이용하면 코드를 개선할수 있다.
npm install classnames
Import cn from ‘classnames’; 로사용하고 컴포넌트 내에서는 cn() 으로 사용된다.
Sass로 작성하기
Css와 비슷하지만 별도의 문법을 이용해서 생산성이 높은 스타일 코드를 작성할수 있게 도와준다,
변수, 믹스 등의 개념을 이용하여 코드를 재사용할수 있다
Npm install node-sass 패키지를 설치한다.
파일명.scss 로 관리한다.
$sizeNormal: 100px;
.box{
Width: $sizeNormal}
처럼 변수처럼 사용이 가능하다. 또한 다른 곳에서 import하여 다른곳에서도 변수를 사용할수 있다.
css-in-js 로 작성하기 (styled-components)
Css를 자바스크립트 파일 안에서 작성한다. 공통되는 코드를 변수로 관리할수 있고 일바적인 리액트 컴포넌트처럼 사용될수 있다.
styled-components는 자세하게 나중에 알아보도록 하겠다.
