[ React.js ] Create React App (CRA)로 리액트 앱 쉽게 시작하기 2 - 정리하기

 

---

 

 

이전 포스트 보러가기

[ React.js ] Create React App (CRA)로 리액트 앱 쉽게 시작하기 1

 

이전 포스트에 이어서, CRA로 만든 프로젝트를 조금 다듬어 보겠습니다.
CRA 로 프로젝트를 생성하고 막 시작하면, 아래와 같이 미리 만들어진 예제가 있습니다.

 

하지만 보통 프로젝트를 시작하면, 빈상태로 시작하는 것이 편할 때가 있습니다.
그러므로 CRA로 만들어진 몇몇개의 파일들은 삭제하거나 수정할 필요가 있는것입니다.

시작하기 전에, npm run start로 개발서버를 실행 시켜둔 상태로 진행합니다.
그 이유는, react 개발서버는 코드나 파일 구조가 변화하는 즉시 재컴파일을 실행하기 때문에 순간 순간의 오류를 잡아내기 쉽기 때문입니다.

개발 서버를 실행 시켰다면 먼저, 로고부터 삭제합니다. /src폴더에 logo.svg 를 삭제하면 되겠습니다.

 

삭제하게 되면, 개발서버를 실행하고 있는 터미널에서 오류가 즉시 발생하게 됩니다.
logo.svg를 참조하고 있던 코드에서 logo.svg에 더이상 접근할 수 없게 되어서 나타나는 오류입니다.

 

이 원인은 바로 App.js에 있는데요 /src/App.js는 아래와 같습니다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
    render() {
        return (
                <div className= "App" >
                    <header className="App-header" >
                        <img src={ logo } className = "App-logo" alt = "logo" />
                        <p>Edit < code > src / App.js < /code> and save to reload.</p>
                        <a className="App-link" href = "https://reactjs.org" target = "_blank" rel = "noopener noreferrer" > Learn React </a>
                    </header >
                </div>
        );
    }
}

export default App;

위의 코드에서

import logo from './logo.svg';

이부분이 바로 오류를 발생시키는 것입니다. 삭제를 해야하는데요, 삭제하는 김에 App.js를 다음과 같이 수정합니다.

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
                <div>
                    <h1>Hello World</h1>
                </div> 
        ); 
    }
}

export default App;

App이라는 리액트 컴포넌트를 상속받는 클래스를 정의하고, render()함수에서 return을 통해 html 문법을 쓰듯이 작성합니다. render함수의 return문 안에는 <div>와 같은 태그가 최소 1개이상 존재해야 오류가 나지 않는다는 점에 유의 합니다.

그 후, src에 있는 App.css와 index.css의 내용을 모두 지웁니다. 이 두개를 삭제하지 않는 이유는 나중에
사용할 일이 생기기 때문입니다.

이제 localhost:3000 에 접속하여 결과를 확인합니다.

 

App.js에서 입력한대로 Hello World만 출력되고 완전 텅 빈상태인 것을 볼 수 있습니다.

이제 코딩을 시작하시면 되겠습니다.