React component styling 방식
일반 CSS
- 소규모 프로젝트에 적합하다.
- 일반적으로 CSS파일을 만들고 해당 파일을 component파일에 import 하여 적용한다.
Sass (Syntactically Awesome Style Sheets)
- 문법적으로 멋진 스타일시트다
- CSS 전처리기를 이용해 복잡한 작업을 보다 쉽게 처리할 수 있다.
- CSS 전처리기: 자신만의 특별한 문법을 가지고 CSS를 생성하는 프로그램 즉, 변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다.
Styled-Components
- JavaScript 안에서 CSS를 자성하도록 도와주는 CSS-in-JS 라이브러리다.
- component기반의 설계 방식을 사용한다.
일반 CSS
- 기존 CSS 클래스를 이용할 경우, component별 클래스가 중복되지 않도록 클래스명을 지정해야 한다.
- 방법 1: 이름 규칙 정하기
- (이름 -- 클래스) 형태로 이름 만들기.
- ex. App-logo
- BEM 네이밍
- ex. app__title-primary
- (이름 -- 클래스) 형태로 이름 만들기.
- 방법 2: CSS Module 형식 사용
- CSS 파일명을 component명.module.css로 생성
- JavaScript 파일에서 import 하여 객체 형태로 사용
- 방법 1: 이름 규칙 정하기
Sass (Syntactically Awesome Style Sheets)
- 복잡한 작업을 보다 더 간편하게 할 수 있도록 도와주며, 스타일 코드의 재활용성과 코드의 가독성을 높이며 유지 보수를 더욱 쉽게 해 준다.
- 가능환 확장자:
- .scss
- 기존의 .css 파일과 비슷한 문법을 이용한다. (세미콜론과 중괄호를 사용한다)
- .sass
- 세미콜론(;)과 중괄호({})를 사용하지 않고 탭(tab)으로 스타일을 정의한다.
- .scss
- .scss 와 .scss 모두 변수를 선언할 때는 $ 를 변수명 앞에 붙여줘야 한다.
Sass 사용하기
npm install node-sass
//위에 명령어가 에러날경우,
npm install -D sass1. 변수 사용
- 자주 사용되는 값들을 변수화 하여 사용할 수 있다.
2. 연산
- calc 함수 사용 없이 연산이 가능하다.
3. 믹스인
- 선언할 때는 @mixin 뒤에 믹스인 이름, 그리고 인수도 정의할 수 있다.
- 호출할 때는 @include 뒤에 미스인 이름 그리고 보낼 인자를 넣어줄 수 있다.
4. 중첩
- 특정 요소 안에 있는 요소를 선택하고 싶을 경우 유용하게 사용되며 &연산자는 해당 요소의 부모 요소 선택자가 대입된다.
5. 확장
- 기존에 다른 선택자에서 정의된 스타일을 상속받고 싶을 경우, @extend 뒤에 상속받고 싶은 선택자를 입력해 준다.
- 이때, 상속받을 선택자의 스타일과 중첩되는 속성이 있을 경우, 직접 정의된 속성값이 우선순위를 가진다.
6. 파일 분리
- 파일명 앞에 _를 붙여서 생성하면 파일단위로 분리되어 컴파일되지 않는다.
Styled-Components
설치
npm install styled-components
사용 방법
- 별도의 .css 파일 생성 없이 JavaScript component 파일에서 바로 styled-components 패키지에서 styled를 import 하고 사용할 수 있다.
- styled.html태크 + 백틱 (``)으로 styled-component 생성을 할 수 있으며 백틱 사이에 일반 CSS 속성과 속성값들을 정의하여 사용할 수 있다.
공식 문서: https://styled-components.com/docs
styled-components: Documentation
Learn how to use styled-components and to style your apps without stress
styled-components.com
https://velog.io/@sorious77/React-Styled-Components-사용-방법-e9o4rnfq
React - Styled Components 사용 방법
React에는 여러 방법을 통해 CSS를 적용할 수 있다. 그 중에서도 개인적으로 가장 좋다고 생각되는 Styled-Components의 여러 사용 방법에 대해 알아보자.
velog.io
느낀 점들
현재 배운 3가지의 스타일링 방법 중에서는 Sass를 가장 편하게 사용할 수 있을 것 같다. Styled-Components는 공식 문서와 다른 소스들을 조금 더 확인해 볼 계획이며 Material UI, Ant Design, Tailwind CSS에 대해서도 공부해 볼 계획이다.