본문 바로가기
IT_Developers/React

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

by 고코더 2021. 1. 17.

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>

 


마무리


 

느낌 오시죠?

 

 

댓글