index.css

이번에는 리액트에서 css파일을 수정하는 방법을 알아보자

src > index.js 파일을 보면 "index.css"라는 파일을 확인할 수 있다.
해당 css파일도 열어보자.

index.js

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import './index.css'; // <--- 해당 파일 열기
import * as serviceWorker from './serviceWorkerRegistration';
// 서비스 워커 
ReactDom.render(<App/>, document.getElementById('root'));
serviceWorker.unregister();

index.css

body {...}
code {...}

위 index.css 코드 내용들을 지우고 간단하게 배경색을 바꿔보자
index.css body{ background-color : lightcoral; }

입력 후 저장하고 터미널에 npm run start 명령어를 입력해 실행시키기

뒷배경에 자신이 원한 색이 출력되는 것을 확인할 수 있다.

import... from ...

index.js 파일 안에 적혀있는 코드를 살펴보자.

import App from './App';

ReactDom.render(<App/>, document.getElementById('root'));

import는 ES6에서 새롭게 도입된 키워드로 App이라는 값은 './App'라는 경로에서 가져온다는 것을 알 수 있다.

여기서 따옴표나('') 소괄호형식({})이 아닌 일반적인 단어라면
해당 경로에 export default App; 이라는 export값이 있어야만 import App 를 사용할 수 있다.

import App 를 import Apple로 바꿔서 사용할 수 있다.

import Apple from './App';

ReactDom.render(<Apple/>, document.getElementById('root'));

단 from 키워드 뒤에 경로는 경로 위치를 알려주므로 바꾸면 작동이 되지 않을 것이다.

App.css

App.js 에 있는 코드에도 .css 파일을 가져오고 있다.
import './App.css'; 이 코드는 App.js 안에 있는 react 컴포넌트가 로드됐을 때 app.css도 로드될 수 있다.

이를 통해 디자인을 같이 할 수 있다.

App 이라고 하는 컴포넌트의 디자인을 App안에 넣는 것이다.