설치가 다 완료되었다면 이제 리액트를 시작하는 디렉토리의 구조가 어떤지 살펴보자.
이 책에서는 어디를 어떻게 수정해야하는지 먼저 알려주고 있다.

React 디렉토리 구조

: 리액트는 크게 src와 public으로 나뉜다.
먼저, public을 살펴보았을때 index.html 이라는 파일을 볼 수 있다. 이것은 Create-react-app을 실행했을때 처음으로 웹화면을 볼 수 있는 페이지이다. 여기서 중요한건 html처럼 일일이 다 손수 쓰는게 아니라 앞에서 말한 컴포넌트들을 더욱 쉽게 이용해서 페이지를 만들 수 있다.

index.html 파일을 보았을때,

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

요 코드를 볼 수 있다. 이 곳에 컴포넌트들이 들어간다고 한다. 들어가는 위치도 물론 변경 가능하다. 그렇다면 root태그 안쪽에 컴포넌트들을 어떻게 넣고, 또 수정할 수 있을까?

src 디렉토리를 보자.
src를 살펴보면 index.js 파일을 볼 수 있다. 이 파일은 앱의 진입점 역할을 하는 파일이고, src는 우리가 앞으로 리액트 프로그래밍을 하게 됐을때 대부분의 파일은 이 디렉토리에 넣고, 또 수정하는 곳이다.

그렇다면 이제 index.js 파일을 살펴보자.
여기서 봐야할 것은

document.getElementById("root");

요 아이다. 얘는 index.html 파일에서 보았던 id가 root인 태그이다. 그리고

<App />

이라고 적힌 부분도 볼 수 있는데, 이것은 바로 리액트를 통해 만든 컴포넌트이다. 그리고 이 컴포넌트의 구현은

import App from './App'

을 통해 가져온다. 이 아이는 .js가 생략된 js파일이다.

이 파일을 열어보면 App 컴포넌트를 볼 수 있는데 함수방식으로 적혀있는 것을 확인 할 수 있다. 이 책에서는 클래스방식으로 컴포넌트를 사용한다고 하니 아래처럼 바꿔주자. 드림코딩 class수업을 빼먹지 않고 듣길 잘했다😅

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 Reat </a>
                </header>
            </div>
        )
    }
}

export default 'App';

즉, index.js파일에 있는

<App />

요 아이는 원래 존재하지 않는 아이지만 create-react-app이 App.js에서 샘플로 만들어서 'App'이라는 컴포넌트가 탄생된것이다. 그래서 index.html파일의 root태그 안에 이 아이가 있는 것이다:)

그렇다면 App 컴포넌트를 수정하면 어떻게 될까?

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

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

export default App;

요렇게 저장해서 살펴보면 코드가 바뀐것을 확인할 수 있다. (저장하면 새로고침할 필요없이 알아서 바뀐다) 여기서 주의할 점은 리액트 컴포넌트는 하나의 태그 안에 들어가야한다는 점이다. 이 말은 가장 바깥쪽에는 오직 하나의 태그만 있어야 한다. return문 다음에 하나의 태그만 올 수 있게 하자.

자, 이렇게 하면 어플리케이션 코드를 수정하려면 어디를 수정해야할지 감이 올 것이다.

다시 간단히 살펴보자면,
리액트를 실행했을 때 처음 보이는 웹페이지는 public 디렉토리의 index.html파일이다. 그리고 index.html파일의 root안에 컴포넌트들을 넣어서 우리는 리액트를 사용할 수 있는데, 컴포넌트들은 src 디렉토리에 컴포넌트의 js파일을 만들고, 그다음에 index.js파일에서 넣거나 수정하면 된다.
이 책에서는 클래스타입으로 import와 export를 하므로 이것은 참고해서 알고 있자.
정리하자면, index.js파일을 보았을때 create-react-app이 샘플로 만든 '< App>'을 확인할 수 있었고, 이 컴포넌트는 import해 온 아이이므로 필요한 코드들이 해당 js파일에 묶여서 보관되는 것이다.
정말 말 그대로 컴포넌트를 만들어서 쉽게 이곳저곳에 사용할 수 있다고 하니, html을 작업할때 계속 반복해서 코드를 작성하거나 복붙했던 이전의 내가 조금더 수월하게 작업할 수 있는 첫걸음을 뗀 것 같다.

출처: 생활코딩! React 프로그래밍 책