React 시작하기 (2)

개요

 

' npx create-react-app ' 을 통해 설치된 개발환경 디렉토리 살펴보기

 

React app이 어떻게 구동되는지 간략하게 살펴보기

 

---

 

디렉토리 살펴보기

 

설치된 디렉토리

node_modules

-  라이브러리를 모은 폴더

 

public

-  정적 파일을 담는 곳. (이미지 등)

-  앱 밖에서 사용하는 이미지는 이곳에 담는다. (favicon 등)

-  파일명을 써주기만 해도 import가 가능하다

 

src

-  개발과 관련된 폴더

-  보통 이 폴더를 많이 사용한다

 

---

 

React 구동방식 알아보기

 

React 앱의 돌아가는 순서를 역으로 설명하면 다음과 같다

 

1. public폴더의 index.html

2. src폴더의 index.js

3. src폴더의 app.js

 

---

 

1. index.html

이 파일이 화면에 보여지는 파일이다.

 

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

 

index.html 파일을 살펴보면 위와 같은 div 블록이 있는데 이 블록이 현재 브라우저에 보여지는 것이다.

 

root div

 

하지만 div 블록 안에 아무것도 없는데 어떻게 저런 화면이 보이는걸까?

 

다음 파일들을 살펴보면 알 수 있다.

---

 

2. index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

import App from './App';

 

const root = ReactDOM.createRoot(document.getElementById('root'));

 

root.render()

 

이 파일에서 유의깊게 봐야 할 구문들이다.

getElementByid를 통해 id가 root인 요소인 엘리먼트 객체를 파악하고

render 함수를 통해 객체(<App />)를 화면에 랜더링 해준다는 의미이다.

( <React.StrictMode>  부분은 신경 안써줘도 된다. )

 

즉, <App / > 부분을 index.html 파일의 root div에 넣어서 보여준다는 말인데, 

이 <App / >이 바로 App.js 파일이다.

 

---

 

3. App.js

import logo from './logo.svg';
import './App.css';

function App() {
  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;

 

export default App;

-  App이란 이름으로 export 할께요~

-  위 구문을 통해 index.js에서 App.js파일을 가져다 쓸 수 있다!

 

코드를 보면 브라우저에 띄워지는 문구들이 보인다!!

위 코드의 Learn React를 수정해보자

 

 

수 - 정

 

정말 브라우저에 반영이 되는 것을 확인할 수 있다.