React 입문 | React 기본적인 구조 | index.js 어플리케이션의 프로그램

생성된 소스 코드를 살펴 보겠다.

응용 프로그램의 프로그램에 대해

메인 프로그램인 ‘index.js’를 설명한다.. 아래에 소스 코드를 올려 둔다. 내용을 순서대로 설명하겠다.

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

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

import 문에 대해

최초에 import 문이 여러개가 작성되어 있는데, 이는 외부의 모듈을 로드하는 것이다. 이 import 문은 JavaScript에서는 그다지 익숙하지 않을지도 모르지만, 이것은 ES6(ECMAScript 6 Edition)에서 지원되는 기능이다. React에는 “Babel"라는 ES6 대응의 트랜스 컴파일러를 사용하고 있기에 이러한 ES6의 기능을 사용할 수 있다.

최초에 “react”, “rect-dom"라는 모듈을 로드하고 있고, 이것들이 React의 본체이다. 또한 다음의 “./App”, “./index.css"은 여기에서 사용하는 컴포넌트와 스타일 시트이다. 이 또한 import로 로드한다.

ReactDOM.render

그 다음에 ReactDOM 객체의 “render"라는 메소드를 실행하고 있다. 이것은 이 프로그램에서 실행하는 유일한 처리이다. 이 컴포넌트를 지정된 위치에 넣어 렌더링을 수행하는 것으로, 다음과 같이 실행한다.

ReactDOM.reder(컴포넌트, 조합 대상 요소);

첫번째 인수는 App.js으로 정의하고 있는 App 컴포넌트를 지정하고 있다. 그리고 두번째 인수는 root라는 ID의 요소를 지정한다. 그러면 App 컴포넌트가 root 태그에 포함된 코드가 렌더링되고 출력된다.

JSX 대해

여기에서는 render 인수에 <App />라는 것이 지정되어 있다. 이 App 컴포넌트의 태그이지만, JavaScript의 인수에 직접 HTML 태그를 작성되어 있어서 이상하게 생각되었을 것이다. 이것은 JSX 라는 기능을 이용한 것이다. 이것은 아마도 “JavaScript Expression"을 약자일 것이다. 이 JSX는 HTML 태그를 그대로 JavaScript 코드 내에 작성할 수 있는 기능이다. 단독 태그가 아니라, 태그 안에 별도의 태그가 포함된 복잡한 것도 처리할 수 있다.

<App />이라는 값을 작성하는 것으로, <App />라는 태그에 정의된 사용자 지정 컴포넌트를 render 에 지정하고 있다.