0. 컴포넌트란 무엇인가?

컴포넌트, 컴포넌트 하는데, 이 컴포넌트는 과연 무엇일까요?

리액트 프로젝트로 만들어진 애플리케이션의 모든 요소들은 '컴포넌트'로 만들어집니다. 사용자의 눈에 보이는 버튼, 입력창, 메뉴탭, 영역 등등 모두가 컴포넌트이며, 리액트 앱은 여러 개의 컴포넌트들이 조합된 것이라고 할 수 있습니다.
즉, 사용자가 앱을 사용할 때 보게 되는 비주얼을 정의하는 무언가가 바로 컴포넌트라고 할 수 있습니다.

컴포넌트는 이렇게 정의할 수 있습니다. 0. Tutorial의 시작에서 만든 리액트 프로젝트로 들어가서, src 디렉터리에 아래와 같은 파일을 작성해 보시기 바랍니다.

HelloWorld.js

import React from 'react'; //리액트 컴포넌트를 만들려면 이렇게 react를 import 해줘야 합니다.

//컴포넌트 이름은 대문자로 시작하고, 더 길어지면 카멜 케이스를 적용합니다.
function HelloWorld() {
  return <div>안녕하세요!</div>;
}

export default HelloWorld;

좋습니다. 이로써, HelloWorld라는 컴포넌트를 만들었습니다. 쉽죠?

---

이제, 이 컴포넌트를 App.js에서 사용해 보겠습니다. /src 디렉터리에 있는 App.js 파일을 열어서, return() 안에 있는 코드를 모두 지우고 아래와 같이 적어 볼까요?

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import HelloWorld from './HelloWorld.js'; //추가 //.js는 생략해도 무방합니다.

function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

export default App;

import HelloWorld from './HelloWorld.js 는, App.js와 같은 폴더 내에 있는 HelloWorld.js 파일에서 HelloWorld라는 컴포넌트를 불러온다는 뜻입니다.

컴포넌트가 잘 적용되었는지 확인해 볼까요? 브라우저를 봅시다.

잘 됐습니다!
또한, 컴포넌트는 여러 번 재사용할 수 있습니다. 이렇게 말이죠.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import HelloWorld from './HelloWorld.js'; //추가 //.js는 생략해도 무방합니다.

function App() {
  return (
    <div>
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />      
    </div>
  );
}

export default App;

App.js에서 HelloWorld 컴포넌트를 4번 사용해 봤습니다. 그러면, 컴포넌트가 아래와 같이 4개가 출력되는 것을 볼 수 있습니다.

이와 같이, 컴포넌트가 모이고 모여서 애플리케이션이 만들어집니다. 이로 볼 때, 컴포넌트란 UI 조각이라고 생각하면 이해하기 쉬울 것 같습니다.

---

그런데, 왜 App.js에 컴포넌트를 넣고 있고, 왜 App.js에 있는 JSX 코드가 웹 애플리케이션에 출력되는 걸까요? 다시 한 번, App.js를 보시죠.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import HelloWorld from './HelloWorld.js'; //추가 //.js는 생략해도 무방합니다.

function App() {
  return (
    <div>
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />
      <HelloWorld />      
    </div>
  );
}

export default App;

App.js을 보니 App() 이라는 함수가 정의되어 있네요. 그리고 그 함수는 <div>와 같이 HTML 태그 같은 것들을 return하네요. 그런데, function App(){...}은 아까 HelloWorld 컴포넌트를 만들 때랑 형식이 똑같지요? 그렇습니다. 리액트 프로젝트에 기본적으로 생성되는 App.js의 App() 함수는 App 컴포넌트이며, App 컴포넌트가 return하는 HTML이 웹 애플리케이션 화면에 그려지는 것이지요.

---

그러면, App.js에 있는 내용이 어떻게 웹 애플리케이션에 그려지는 것일까요? 맨 마지막 줄을 보면, export default App이라는 코드가 보입니다. App 컴포넌트를 export 했다는 뜻인데요, 이를 보면 '어디선가 App 컴포넌트를 쓰고 있겠구나?'라는 합리적 의심을 할 수 있습니다.

도대체 어디서 쓰고 있는 걸까요? 자, /src에 있는 index.js 파일을 확인하겠습니다.

index.js

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

//id가 root인 엘리먼트를 찾아 리액트 App을 그 안에 넣는다는 의미.
//root는 '../public/index.html'에 id=root인 <div>에 있다.
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 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();

조금 어려워 보이네요. 자, ReactDOM.render의 의미는 '브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다'라는 뜻입니다. <App />이 들어간 것을 보아, App 컴포넌트를 렌더링하겠군요! 만약, "나는 App 컴포넌트가 아닌 다른 컴포넌트를 화면에 그리고 싶은데? 나는 App.js에 있는 App 컴포넌트 대신, Web.js 파일을 만들어 Web이라는 컴포넌트를 내보내고 싶어!" 라고 한다면, 위의 index.js에서 import Web from './Web'; 구문을 추가하고, <App /> 을 <Web /> 컴포넌트로 수정해야겠지요!

그리고 id가 root인 DOM을 선택하고 있네요. 저 DOM이 바로 우리가 만든 리액트 컴포넌트가 그려지는 곳입니다. 이것은 어디 있을까요?

/public/index.html을 열어보면,
<div id="root"></div>
라고 된 부분을 찾아볼 수 있습니다.
즉, 리액트 컴포넌트가 렌더링 될 때는 id가 root인 div 내부에 렌더링되는 것입니다.

정리

이번 장의 내용을 정리하겠습니다. 이번 장에서는 간단한 컴포넌트를 만들어 보았습니다.

• 리액트의 컴포넌트란 '사용자가 앱을 사용할 때 보게 되는 비주얼을 정의하는 무언가'이다.
• 리액트 애플리케이션은 여러 개의 컴포넌트가 조합되어 완성된다. 이러한 측면에서, 컴포넌트란 UI 조각 이라고 볼 수 있겠다.
• 컴포넌트는 재사용이 가능하다.
• 리액트 애플리케이션의 메인인 App.js는 App이라는 컴포넌트를 export한다. 그리고 이 App 컴포넌트는 id가 root인 DOM에서 출력된다.