본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다.
00. 개요
이번에는 리액트 컴포넌트를 스타일링하는 방법에 대해서 알아보자. 리액트에서 컴포넌트를 스타일링 할 때에는 다양한 기술이 사용될 수 있다.
리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 컴포넌트에서 import 해서 사용하는 것이다. 이 방법은 어떤 사람들에게는 충분히 편리할 수도 있겠지만, 컴포넌트를 스타일링 할 때 다른 도구들을 사용하면 훨씬 더 편하게 작업을 할 수 있다.
이 튜토리얼에서는 리액트 프로젝트에서 컴포넌트를 스타일링 할 때 자주 사용되는 다음 기술들에 대하여 다뤄보게 된다.
- 1)Sass
- 2)CSS Module
- 3)styled-components
위 기술들을 다뤄보게 되면서, 단순히 사용법만 알아보는걸 떠나서 나중에 여러분들이 실무를 다루게 될 때에도 충분히 도움이 될 수 있는 재사용성이 높은 버튼을 만드는 방법, 커스텀 체크 박스를 만드는 방법, 그리고 모달을 만드는 방법을 알아볼 것이다.