리액트 - 4. JSX 문법

JSX 문법 알아보기

 

 JSX 문법을 사용하면 자바스크립트 코드에 HTML 태그들을 쉽게 사용할 수 있다. 

 이 JSX 문법을 사용하기 위해서는 index.js에 아래와 같이 추가해줘야한다. 

 

 import { StrictMode } from "react";
 import ReactDOM from "react-dom";
 
 import App from "./App";
 
 const rootElement = document.getElementById("root");
 
 ReactDOM.render(
   <StrictMode>
     <App />
   </StrictMode>,
 rootElement
);

 

💡 ReactDOM.render 는 무엇인가?

  컴포넌트를 브라우저 페이지에 랜더링하는 역할을 하며 "react-dom" 모듈을 불러와서 사용한다. 

  이 함수의 첫번째 파라미터에 페이지에 랜더링할 요소를 JSX 형식(또는 컴포넌트)으로 작성하고,

  두번째 파라미터에 랜더링 할 실제 DOM 요소를 작성한다. 

 

 

1. JSX 란 

  자바스크립트에 HTML 형식을 추가한 자바스크립트 확장 문법이다. 

  ( 정확하게는 XML 형식을 추가한 문법이다. )

 

return <div>React!</div>;

  리액트 컴포넌트에서 HTML 형태로 코드를 작성하게 되면 babel은 이를 자바스크립트로 변환해준다. 

  

  https://bit.ly/2wMpkk2 여기에 들어가서 babel이 어떻게 변환시키는지 확인해보자!

 

 

 

💡 Babel 이란?

    JSX 문법 및 최신 사양의 자바스크립트 코드를 IE 브라우저 또는 구형 브라우저에도 

    동작할 수 있게 ES5(이전 버전)으로 변환(= 트랜스파일링)해주는 도구이다.  

  

  

 2. JSX 규칙 

  babel이 JSX 을 올바르게 변환해주려면 JSX 규칙대로 작성해야한다. 

 

  01) 닫는 태그

   JSX 는 XML 형식으로 작성해줘야한다. 즉, 닫는 태그를 생략하면 에러가 발생한다. 

   빈태그 역시 닫아줘야한다. 

 

 import React from 'react';
 import Hello from './Hello';
 function App() {
   return (
     <div>
       <Hello >
       <br>
     </div>
   );
 }
 export default App;
 

 

 

( 결과 화면 )

 

 

 

  02) 감싸인 태그 

  컴포넌트에 두개 이상의 요소가 있다면 하나의 태그로 감싸야한다.

 

 import React from 'react';
 import Hello from './Hello';
 function App() {
   return (
     <div>
       <Hello />
       <Hello />
       <Hello />
     </div>
   );
 }
 export default App;
 

  

💡 왜 두개 이상의 요소가 있으면 하나의 요소로 감싸야 하나?

  Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있게

  컴포넌트 내부는 하나의 DOM 트리 구조로 구성되어야 하기 때문

 

💡 그럼 꼭 저렇게 div 태그로만 작성해야 하나? 

  저 div 태그를 사용하고 싶지 않다면 Fragment라는 기능을 사용하면 된다. 

  - 사용하기 위해서는 react 모듈에서 제공하고 있는 Fragment라는 컴포넌트를 불러와야한다.

   → import React, {Fragment} from 'react';

 

 import React, {Fragment} from "react";
 import Hello from "./Hello";
 function App() {
   return (
     <Fragment>
       <Hello />
       <Hello />
     </Fragment>
   );
 }
 export default App;
 

 

  위 코드는 아래와 같이 <></> 요소로 간단하게 작성할 수 있다.  

  (단,  속성을 넣을 때는 div 요소나 Fragment를 사용해야한다.)

 

 import React from "react";
 import Hello from "./Hello";
 function App() {
   return (
     <>
       <Hello />
       <Hello />
     </>
   );
 }
 export default App;
 
 

 

   

 

  03) 자바스크립트 코드 

   JSX에서 자바스크립트 코드를 작성할 때는 중괄호({ })를 사용해서 그 안에 작성한다. 

   

 import React from "react";
 function App() {
   const sayHello = "hello";
   return <div>{sayHello}</div>;
 }
 
 export default App;

 

 

( 결과 화면 )

 

 

 

  4) 주석처리

  JSX에서 주석을 사용하려면, 중괄호 안에 /* */  으로 작성하거나 열린 태그 안에 // 으로 작성한다. 

 import React from "react";
 import Hello from "./Hello";
 function App() {
   return (
     <>
       <br /> 
       {/* 빈태그도 닫는 태그를 반드시 작성해야한다. */}
      
       <Hello 
         // 열린 태그에서는 이런식으로 주석 처리할 수 있다.  
       />
     </>
   );
 }
 
 export default App;
 

  

💡 주석을 사용하는 이유?

  개발을 혼자하는 거라면 내가 알아보기 쉽게 코드를 작성하면 그만이지만 

  여러 사람들과 협업해서 개발하는 상황이라면 다른사람들이 알아보기

  쉽게 주석으로 코드에 대한 설명 및 기능에 대해서 작성할 필요가 있다. 

   

   정말 좋은 코드는 주석없이 코드로 설명이 되는 코드지만 아직 배우는 입장에서는

   코드에 대한 설명(목적)과 그 기능에 대해 정리하는 것이 좋다. 

  

 

  ---

 

   참조

    - 리액트: 벨로버트 강좌(+ Gitbook )

    - 주석 부분: javascript.info