React.js - 리액트에서 "Hello JSX!" 출력하기

---

JSX를 사용해서 페이지 띄우기 

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. 이번 시간에는 JSX를 사용해 간단하게 리액트에서 "Hello JSX"를 표현해보려고 합니다. 리액트를 처음이라면 우선 JSX를 간단하게 사용하는 방법을 배워보는 게 좋을 거 같아서 JSX를 아주 간단하게 작성해보는 시간을 가집니다. 우선 이전에 프로젝트 빌드까지 과정이 끝나야 합니다 카테고리에 있는 글을 차례대로 읽어보시면 좋습니다. 그럼 create-react-app로 프로젝트가 완성되었다고 진행해보겠습니다. 

 

● 2. 프로젝트 폴더에서 index.js 파일을 열어보겠습니다. 다양한 에디터 도구가 있지만 추천하는 건 VSCode로 수정을 해보시길 바랍니다. 

C:\react\hello\src\index.js

 

● 3. index.js 안에 내용을 아래처럼 변경합니다.  불필요한 호출을 삭제하고 엘리먼트를 하나 생성해서 렌더링 한 것입니다.  

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

const element = <h1>Hello, JSX</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);​

 

 

● 4. 내용이 수정되었다면 이제 프로젝트를 실행합니다. 그럼 아래처럼 Hello JSX가 출력됩니다. element에 입력한 내용이 자연스럽게 페이지에 노출되었습니다. 순식간에 헬로 코딩이 끝나 버렸네요.

 

● 5. 간단하게 코드를 리뷰하자면 우선 해당 Hello 소스를 <h1> 태그로 만들었습니다. 

const element = <h1>Hello, JSX</h1>;

 

● 6. 그리고 이제 가상 돔에 root라는 엘리먼트에 랜더링 합니다. 

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

● 7. 해당 root 라는 div는 C:\react\hello\public\index.html 라는 파일에 존재합니다. 해당 영역에 랜더링 됩니다.

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

 

---

마무리

---

 

느낌 오시죠?