⭐️ 컴포넌트 스타일링
다양한 리액트 스타일링 방식
- 일반 css → 컴포넌트를 스타일링 하는 가장 기본적인 방식
- Sass → css 전처리기 중 하나로 확장된 css 문법을 사용
- CSS Module → 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션
- styled-components → 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해 줍니다.
⭐️일반 CSS
CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것입니다.
CSS 클래스가 중복되는 것을 방지하는 여러 가지 방식이 있는데, 그 중 하나는 이름을 지을 때 특별한 규칙을 사용하여 짓는 것이고, 또 다른 하나는 CSS Selector를 활용하는 것 입니다.
이름짓는 규칙
프로젝트에 자동 생성된 App.css를 읽어 보면 클래스 이름이 컴포넌트 이름-클래스 형태로 지어져 있습니다.
클래스 이름에 컴포넌트 이름을 포함시킴으로써 다른 컴포넌트에서 실수로 중복되는 클래스를 만들어 사용하는 것을 방지할 수 있습니다.
비슷한 방식으로 BEM 네이밍 방식이 있는데, CSS방법론 중 하나로, 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식입니다.
CSS Selector
CSS Selecor를 사용하면 CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일을 적용할 수 있습니다.
예를 들어 .App 안에 들어 있는 .logo에 스타일을 적용하고 싶다면 다음과 같이 작성하면 됩니다.
.App .logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}⭐️Sass 사용하기
Sass(Syntactically Awesome Style Sheets) 는 CSS 전처리기로 복잡한 작업을 쉽게 할 수 있도록 해 주고, 스타일 코드의 재활용성을 높여 줄 뿐만 아니라 코드의 가독성을 높여서 유지 보수를 더욱 쉽게 해 줍니다.
설치 $ yarn add sass
sass 예제
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-colorutils 함수 분리하기
여러 파일에서 사용될 수 있는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳에서 쉽게 불러와 사용할 수 있습니다.
src 디렉터리에 styles라는 디렉터리를 생성하고, 그 안에 utils.scss파일을 생성하여 관리합니다.
⭐️CSS Module
CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름][클래스이름][해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술입니다.
CSS Module을 사용하면 클래스 이름을 지을 때 그 고유성에 대해 고민하지 않아도 됩니다. 흔히 사용하는 단어로 이름을 짓는다고 해도 전혀 문제가 되지 않습니다 해당 클래스는 우리가 방금 만든 스타일을 직접 불러온 컴포넌트 내부에서만 작동하기 때문입니다.
특정 클래스가 웹페이지에서 전역적으로 사용되는 경우라면 :global을 앞에 입력하여 글로벌 css임을 명시할 수 있습니다.
⭐️styled-components
컴포넌트 스타일링의 또 다른 패러다임은 자바스크립트 파일 안에 스타일을 선언하는 방식으로 이 방식을 CSS-in-JS 라고 부르는데요.
$ yarn add styled-components
styled-components의 큰 장점은 바로 props 값으로 전달해 주는 값을 쉽게 스타일에 적용할 수 있다는 것입니다.
Tagged 템플릿 리터럴로 ` 을 사용하여 만든 문자열에 스타일 정보를 넣어 줍니다.
`hello ${{foo: 'bar'}} ${()=>'world'}! ` 템플릿에 객체를 넣거나 함수를 넣으면 형태를 잃어 버리게 되는데, 해당 함수 뒤에 템플릿 리터럴을 넣어 준다면, 템플릿 안에 넣은 값을 온전히 추출이 가능합니다.
