React에서 컴포넌트에 스타일링 하는 방법
- 외부 .css 파일 작성하여 className으로 스타일 지정
- inline css를 react component안에 넣기
- css in js
- 외부 .css 파일 작성하여 className으로 스타일 지정
- css 파일을 따로 만들어서 import 하고 className 선언하는 방식이 번거롭고 귀찮을 수 있다.
- 프로젝트의 규모가 크면 css파일의 부피가 커지며 복잡해질 수 있다.
- inline css를 react component안에 넣기
<div style={}>
</div>- 미디어 쿼리를 사용할 수 없다.
- 확장성과 유지보수 하기에 어려움이 있다.
- css in js
- 컴포넌트 파일 내에서 스타일과 동작 제어까지 함께 코드 작성이 가능하기 때문에 유지 보수가 상대적으로 수월하다.
- 조건부 스타일링이 쉽다.
- 모든 css를 다 로딩하는 것이 아니라 현재 화면에 필요한 css 요소만 골라 로드하기 때문에 상대적으로 가볍다.
- javascript를 해석할 시간이 필요하기 때문에 스타일 적용이 느리다.
