Week11(React)

MOFE의 한학기 스터디가 끝났다. 한주 한주 지날 때마다 점점 더 열심히 했어야 하는데 점점 더 못해진 것 같다.... (특히 이번 주 정리를 가장 대충, 그리고 못했다....ㅎ) 학기가 마무리되고 다시 여유가 생길 때 한학기동안 배워왔던 이 React를 어떻게 활용해서 토이프로젝트를 할지 고민해봐야겠다. 특히, 이 토이프로젝트에서는 반드시 git을 활용해서 변화하는 과정을 모두 기록할 필요가 있겠다.

---

 

리액트의 스타일링 방식은 크게 4가지

 

1. 일반 CSS

 

2. Sass

 

3. CSS Module

 

4. styled-components

 

 

 

1. 일반 CSS

 

원래 우리가 사용하던 CSS 처럼 따로 CSS 파일을 하나 만들고 그곳에 CSS 관련 코드들을 작성. 그 후에 이 파일을 import

 

2. Sass

 

Sass에서는 두 가지 확장자 .scss와 .sass를 사용. 이 둘의 주요 차이점은 .sass에서는 중괄호와 세미콜론을 사용하지 않는다는 점. 이에 반해 .scss 확장자는 기존 css를 작성하는 방식과 크게 다르지 않다. 또한, 실제로 많이 사용되는 문법은 .scss

 

3. CSS Module

 

CSS Module은 CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]_[해시값] 의 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해주는 기술.

이 CSS Module의 가장 큰 장점은 클래스 이름을 지을 때 그 고유성에 대해 고민하지 않아도 된다는 것이다.

 

4. styled-components

 

자바스크립트 파일 안에 스타일을 선언하는 방식! 'CSS-in-JS' 이 CSS in JS 라이브러리 중에서 개발자들이 가장 선호하는 것이 styled-components