리액트 프로젝트 기본 구조 이해하기

지난 시간에 node.js을 설치하고 리액트 프로젝트를 생성했습니다.

리액트 프로젝트 생성하기

리액트 프로젝트 생성하기

 

이번에는 생성된 프로젝트의 기본 구조를 이해하는 시간을 갖도록 하겠습니다.

 

1. 프로젝트 실행하기

우선 프로젝트 폴더로 이동합니다.

프로젝트 폴더를 확인합니다.

 

명령 프롬프트에서 프로젝트 경로로 이동합니다.

 

프로젝트를 실행합니다.

> npm start 

프로젝트를 실행합니다.

 

프로젝트가 실행됐습니다.

 

2. VSCode에서 프로젝트 open하기

VSCode를 실행 합니다.

VSCode를 실행합니다.

 

※참고. 만약 VSCode가 설치되어 있지 않다면 아래 글을 참고해서 설치합니다.

VSCode 설치하기

[3장] VSCode 설치 및 기본 설정

 

File > Open Folder... 을 이용해서 프로젝트를 VSCode에서 open 합니다.

File > Open Folder... 을 클릭합니다.

 

프로젝트 폴더(myapp)을 선택합니다.

 

VSCode에서 프로젝트가 open 됐습니다.

 

3. 리액트 프로젝트 구조 이해하기

프로젝트 구조를 이해하기 위해서는 브라우저의 실행 화면을 보면서 'index.html', 'index.js', 'App.js' 파일들이 어떤 역할을 하는지 이해하면 됩니다. 다시 실행 화면을 보겠습니다.

프로젝트가 실행됐습니다.

 

화면에 '리액트 아이콘', 'Edit src/App.js ~', 그리고 'Learn React'가 보입니다. 

먼저 사용자가 'http://localhost:3000'으로 서버에 요청하면 서버는 'index.html'을 응답합니다.

index.html을 응답합니다.

 

VSCode에서 public/index.html을 open해서 index.html에  '리액트 아이콘', 'Edit src/App.js ~', 그리고 'Learn React'가 있는지 확인합니다.

public/index.html을 확인합니다.

 

index.html에는 '리액트 아이콘'도 없고 다른 요소도 보이지 않습니다. 하지만 <div> 태그가 보입니다.

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

 

<div> 요소의 id는 'root'인데요, 어디선가 id 값을 이용해서 화면에 보이는 요소들을 넣어주지 않을까요? 해답을 찾기 위해서 src/index.js 파일을 보겠습니다.

src/index.js를 확인합니다.

 

index.js 에도 '리액트 아이콘' 등의 요소들은 보이지 않습니다. 하지만 다음과 같은 코드가 보입니다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

위 코드에서 getElementById('root') 함수 보이시나요? index.js는 index.html에서 id가 'root'인 요소를 찾습니다. 그리고 'ReactDOM.createRoot()'를 이용해서 React 애플리케이션의 렌더링을 초기화합니다. 조금 더 자세히 말하면 React 애플리케이션의 루트를 생성하고, 이 루트에 React 컴포넌트를 렌더링할 수 있도록 준비합니다.

이렇게 초기화된 root는 render()를 이용해서 컴포넌트를 가상 돔(Virtual DOM)에 렌더링 합니다. 여기서 렌더링되는 컴포넌트는 'App' 입니다.

roo에 App 컴포넌트를 '렌더링'하고 '커밋'합니다.

 

그럼 App.js도 확인해야겠네요. App.js를 open 합니다.

App.js 코드를 보면 낯익은 부분이 보입니다.

<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>

 

브라우저 화면에서 보이는 요소들이 여기에 있습니다.

화면에 보이는 요소들이 App.js에 있습니다.

 

이제 프로젝트 구조가 조금은 이해되실까요?

결론적으로 우리가 리액트 애플이케이션에 접속하면 index.html이 응답하는데요, 여기에 있는 <div id="root"></div>에 index.js가 App.js 컴포넌트를 렌더링합니다.

 

이제 리액트 프로젝트 구조가 이해 됐습니다. 앞으로 우리는 App.js에 필요한 컴포넌트를 만들어서 사용하면 되겠네요.

 

연습 삼아서 App 컴포넌트를 수정해서 다음과 같은 화면을 만들어 보겠습니다.

 

App 컴포넌트를 수정해서 위와 같은 화면을 만들기 위해서는 App.js의 기존 코드를 모두 지우고 다음과 같이 수정합니다.

import React from "react";

function App() {
    return (
        <>
            Hello React!!
        </>
    );
}

export default App;

 

 

하나만 더 연습해 보죠. 다음과 같이 회원 가입 화면을 만들어 보겠습니다.

 

결과 화면에는 회원 아이디와 비밀번호을 입력할 수 있는 <input>과 'SIGN-IN' <button>이 보입니다.

다음은 App.js를 수정한 코드입니다.

import React from "react";

function App() {
    return (
        <>
            <input type="text" placeholder="INPUT USER ID" />
            <br />
            <input type="password" placeholder="INPUT USER PW" />
            <br />
            <button>SIGN-IN</button>
        </>
    );
}

export default App;

 

이번 시간에는 리액트 프로젝트 구조에 대해서 살펴봤습니다.