[리액트] css 코딩하는 법

Create React App에서 생성한 샘플 애플리케이션에서 css 코드를 어떻게 작성하면 되는지 살펴본다.

index.js 파일 상단에 보면 index.css 파일을 임포트(import)하고 있음을 확인할 수 있다.

import './index.css';     ( ./로 시작하면 해당 파일이 같은 레벨에 위치한다는 뜻.)

index.css 파일을 열어 코드를 다음과 같이 수정하면 웹 브라우저에 자동으로 업데이트 된다.

 + 현 구조에서는 index.css 가 전체에 해당되고, App.css는 커스터마이징 css 라고 생각할 수 있다.

body {
	background-color:powderblue;
}

 

index.js 의 상단을 보면 사용자 정의 컴포넌트인 App을 임포트 하는 부분을 볼 수 있다.

					⋮
                    
import App from './App';  // .App은 App.js를 가리킨다. App은 App.js를 줄여 App이라고 지정함

					⋮
                   

ReactDOM.render(
					⋮
);

위의 import 다음 나오는 'App'은 다른 이름으로 변경할 수 있지만 from 뒤에 나오는 './App'은 다른 이름으로 바꿀수 없다.

from 뒤에 나오는 ./App은 App.js를 줄여서 썼기 때문에 다른 이름으로 바꿀 수 없다.

 

App.js 파일을 보면 App.css 를 임포트 하는 부분을 볼 수 있다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css'; //★★★★★★★★ 해당 부분 중요! ★★★★★★★★★★

따라서 App.js에 있는 App이라는 컴포넌트가 로드됐을 때 App.css 도 함께 로드된다. (= import 되어 있기 때문)

App.css 는 App이라는 컴포넌트의 디자인을 입력하는 곳이라고 생각하면 된다.