[React] Create React App - CSS

이전에 만든 리액트 어플리케이션은 스크립트를 import함으로써 만들어졌습니다. 그리고 기본적으로 모든건 저희가 직접 했는데요. create-react-app을 사용한다면 리액트 어플리케이션을 만드는 것이 훨씬 쉬워집니다.

create-react-app은 엄청나게 많은 스크립트들과 많은 사전설정들을 미리 준비해주기 때문입니다. 예를 들어, 개발 서버에 접근한다던가, 자동으로 새로고침을 시켜준다던가, 즉각적으로 어플리케이션 안에 css를 포함시켜준다던가 하는 기능들이 있습니다. 

create-react-app으로 작업할 때의 포인트는 분할하고 정복하는 것입니다.

우선 react-for-beginners라는 리액트 프로젝트를 react-create-app을 사용하여 설치하겠습니다.

vscode에서 열어준 후,

npm start를 해주면 개발용 서버를 만들어주고 자동적으로 브라우저가 열립니다.

이것이 create-react-app을 사용해서 만든 react application 초기버전입니다!

 

브라우저에 출력

 

 

---

 

CSS 적용

create-react-app으로 작업할 때, CSS를 적용시키는 세 가지 방법이 있습니다. 

1. css 파일에 css를 작성한   index.js에서 import 해오면 됩니다.

2. style prop을 사용하는 방법으로 index.js에 import하지 않아도 됩니다.(css 파일 사용 X.) 즉, 자바스크립트 코드로 스타일을 작성하는 겁니다.(리액트의 자동완성기능이 스타일 작성을 편리하게 해줌) css 파일은 전역적인 특성때문에 모든 요소에 적용되지만 style prop을 사용하면 부분적으로 스타일을 적용시킬 수 있습니다. 

3. CSS module

CSS module

button의 스타일을 Button.module.css라는 파일에 btn이라는 클래스를 만들어서 작성합니다. 그리고 index.js에 import하는 것이 아니라 Button.js에 import해주겠습니다.

그러면 이제 Button 컴포넌트에 btn클래스를 추가할 수 있습니다.

 따라서 create-react-app은 css코드를 자바스크립트 오브젝트로 변환시켜줍니다. 

btn 클래스는 스타일 모듈러고 다른 파일 내에서도 사용할 수 있습니다. 하지만 create-react-app은 랜덤하게 보이는 클래스 이름을 보여주는 것입니다.