리액트는 어떤 디렉토리 구조를 가지고 어디를 수정하면 코딩을 할 수 있는지 알아보자.

Directory 구조

크게 "src" 와 "public" 이라는 디렉토리가 있다.
"public"이라고 하는 디렉토리는 "index.html"이 있는 곳이다.
이전에 npm run start를 입력시 브라우저에 실행된 결과가 "index.html"폴더를 실행한 결과다.

해당 "public" 디렉토리 내에 있는 "index.html"를 열어보면

<div id = "root"></div>

라는 코드를 확인할 수 있는데 이는 "index.html"파일에서 가장 중요한 부분이다.
리액트를 통해서 만들어낸 컴포넌트들은 id가 root인 위의 태그 안에 들어가도록 create-react-app이 약속해놨다.

이제 브라우저에 개발자 도구로 Elements를 열어 확인해 보자.

id가 root인 태그 내부에 react로 만든 태그들이 들어있는 것을 볼 수 있다.

그러면 id가 root인 태그 안쪽에 들어가는 컴포넌트들은 어떤 파일을 수정해서 만들수 있을까.
source의 줄임말인 "src"라는 디렉토리 안에 있는 파일을 사용해야 된다.

이 후 개발을 할 때 대부분의 파일은 "src"라는 디렉토리 안에 넣게 될 것이다.
그 중 entry파일은 index.js 파일이다. index.js 파일에서 주목해야 될 부분은 이 부분이다.

src > index.js

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

이 root가 의미하는 것은 index.html 파일에서 살펴본 id가 root인 태그이다.
앞의 <App/>이라는 것이 바로 리액트를 통해 만든 사용자 정의 태그, 즉 컴포넌트다

import App from './App';

create-react-app이 샘플로 만든 <APP/>컴포넌트의 실제 구현은 "import"를 통해서 불러온 src안의 App.js파일이다.

boostcourse 리액트 강의는 function type이 아닌 class type으로 설명하므로 코드를 수정해야된다.

App.js파일을 클래스 타입으로 수정해보자

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

class App extends Component{
  render(){
    return(
      <div className='App'>

      </div>
    );
  }
}
export default App;

• 그리고 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();

<App />이 태그는 html태그가 아닌 사용자 정의태그다.
즉 create-react-app.이 샘플로 만든 저 컴포넌트의 실제 구현은 App.js파일이다.

App.js 파일에 실제 태그의 내용은

class App extends Component{
  render(){
    return(
      <div className='App'>

      </div>
    );
  }
}

rnder() > return 내에 있는 <div className='App'> 안에 있는 내용들이 구현된다.

위 App.js 코드를 수정해보자.

class App extends Component{
  render(){
    return(
      <div className='App'>
		Hello, React!
      </div>
    );
  }
}

npm run start가 진행중이라면 저장후 브라우저가 새로고침이 되는 것을 알 수 있다.

그리고 코드도 수정된대로 출력되어 있다.