React의 App.js 코드 살펴보기 | 컴포넌트 렌더링하기 | package.json

1. React component 구성요소 (main.js or app.js)

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

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

 

 

import 문

import React from 'react';
import ReactDOM from 'react-dom/client';

create react app 또는 vite 를 이용해 리액트 프로젝트를 만들었다면, 위의 두 라이브러리는 프로젝트에 이미 설치되어 있으며 package.json에서 확인 가능하다.

 

 

 

2. package.json 이란

 

package.json 파일은 node.js가 이용한다. 해당 파일은 프로젝트의 third-party library 의 dependency를 명시하고 관리한다. package.json은 대부분의 프론트엔드 프로젝트에서 찾아볼 수 있으며, 어떤 external 패키지를 이용하고 관리할 것인지를 위해 이용된다.

리액트 라이브러리는 ‘react’ 와 ‘react-dom’ 이 두가지의 패키지의 조합이라고 볼 수 있다.

 

 

3. index.js 코드

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

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

create react app 으로 프로젝트를 만들었을 경우 index.js (vite로 시작했을 경우에는 main.jsx) 해당 파일은 ReactDOM의 createRoot 메소드 호출로 시작된다

 

.

createRoot는 document.getElementById(’root’)라는 html 요소의 포인터(regular vanilla javascript)를 받는다. 이는 index.html 파일의 id=”root” attribute를 가진 div 태그를 가리키는 포인터를 말한다. 이를 통해 해당 요소에 접근한다.

 

 

그 후 render 함수를 호출한다. 호출 대상은 createRoot이 반환하는 객체이며, render 메소드는 React 라이브러리가 아닌 ReactDOM 라이브러리가 제공하는 메소드이다.

 

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이후 render에 JSX코드를 전달한다. 이것의 의미는 id=”root”인 element 안에 <App />이라는 리액트 코드를 render 한 후 화면에 보이게 하라는 것이다.

 

<App /> 의 부모인 <React.StrictMode />는 리액트가 제공하는 기능이고, 작성한 코드가 최적인지, 혹은 작성한 코드가 호환되지 않거나 하는 상황에 경고를 주는 역할을 한다. 하지만 useState 등의 hooks를 사용하면 브라우저에서 두 번 콜되는 상황이 발생할 수 있으니 평소에는 주석처리해두고 <App />만 렌더하는 경우가 종종있다.

 

 

4. App.js 코드

root에 render 되는 <App /> component는 같은 위치에 생성되는 App.js 또는 App.jsx 파일에서 import 되는 요소이다. App.js 내부를 살펴보면

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}

export default App;

App.js 는 간단히 JSX 문법(여기서는 h1 태그)를 반환하고 있다. 이러한 단위를 컴포넌트라고 부르고 리액트에서는 컴포넌트의 조건부 렌더링이 매우 중요한 요소이다. 컴포넌트란 JSX 코드를 반환하는 함수이며 리액트 프로젝트를 구성한다는 것은 바로 이 컴포넌트들을 구성한다는 것이라고 할 수 있다.

 

 

 

5. 컴포넌트의 쓰임

컴포넌트들은 다른 JSX 코드에서 HTML element 처럼 태그로 이용될 수 있다. 예를 들면,

root.render(
  //<React.StrictMode>
    <App />
  //</React.StrictMode>
);

위의 코드에서도 render 함수는 html코드를 받아야하는데, 여기서 <App /> 이라는 JSX 코드가 html element 로써 넘겨지고 있다.

즉, render 함수를 통해 화면에 보여지는 것은 개발자가 만든 <App /> 이라는 컴포넌트이고, <App /> 컴포넌트가 반환하는 것은 <h1>Hello World!</h1> 이다.

 

 

 

따라서 우리는 npm start 명령어를 사용해 지정된 주소 localhost:3000 에서 Hello World! 라는 텍스트를 볼 수 있다.