리액트 : 컴포넌트

[참고 문헌 : Do it! 클론 코딩 영화 평점 웹서비스]

방학 동안 리액트를 공부하기로 한 나는 노마드 코더의 리액트 앱 클론코딩 책을 통해 리액트에 대해 먼저 경험해보기로 하였다. 책에 대해 공부하던 중 리액트의 기초 개념인 컴포넌트에 대해 알게되었다.

- 컴포넌트(Component)

컴포넌트는 리액트 앱을 이루는 최소단위이다.
컴포넌트에 대해 알아보기 위해 리액트의 기본 파일인 App.js, index.js, index.html을 살펴보자.

// App.js
import React from 'react';

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

export default App;

위 파일은 리액트 파일 중 하나인 App.js 파일이다. App.js는 src폴더에 위치한다. 코드 내용을 보면 App이라는 함수를 정의했고 함수는

<div>
  <h1>Hello</h1>
</div>

이 부분을 반환하고 있다. 이것이 App이라는 컴포넌트를 정의한것인데 App()함수가 반환한 HTML 태그들이 리액트 앱 화면에 그려진다.

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

ReactDOM.render(  <App />,  document.getElementById('root') );

다음은 index.js이다. index.js는 App.js와 같은 src폴더에 위치한다. 3번째 줄에서 App.js에서 정의한 App컴포넌트를 import 하였고 5번째 줄에서 ReactDOM.render()함수의 첫 번째 인자로 컴포넌트, 두 번째 인자로 렌더링 될 위치를 전달한다. 즉 위의 코드를 해석하면 'App 컴포넌트를 아이디가 'root'인 엘리먼트에 그려줘'가 된다. 아이디가 root인 엘리먼트는 index.html 안에 있다.