01-3. 리액트 앱 수정하기

src 폴더의 App.css 맨 아래에 다음 코드를 추가하여 스타일을 바꾼다.

..
.title {
	font-style: italic;
}

 

다음과 같이 src 폴더의 App.js의 두번째 줄에 다음 코드를 추가하여, 바뀐 스타일을 반영한다.

import React, { Component } from 'react';
import './App.css';  // 스타일 반영
class App extends Component {
    render() {
        return (
            <div className="App">
                <h1 className="title">두잇! 리액트 시작하기</h1>
            </div>
        );
    }
}
export default App;

 

render() 함수

: 웹 브라우저에 출력되는 HTML을 반환. 

 

 

HTML의 스타일 클래스 이름은 자바스크립트 클래스(class) 키워드와 같으므로 리액트에서는 class가 아니라
className으로 정의하여 사용한다.

JSX 상에서는 class를 사용하면 안되고 className 를 사용해야 한다.

 

 

create-react-app의 핫 리로딩(Hot reloading)

: 리액트 앱을 구동한 상태라면 파일을 저장한 즉시 화면이 바뀐다.