리액트 문법 JSX

JSX란?

-Reac.js에서 사용하는 문법으로 UI를 템플릿화 해줍니다 (필수는 아니지만 장점이 있습니다)

• JSX는 컴파일링이 되고 빠르다
• 에러를 쉽게 감지 할 수 있다
• HTML보다 더 빠르고 쉽게 템플릿작성 가능

기본적인 JSX 문법입니다 이 코드를 바벨(babel)로 변환되어 리액트에 알맞게 변환됩니다. 

 var a = (
     <div>
       <h1>react</h1>
     </div>
 )

아래가 변환된 코드입니다.

 var a = React.createElement(
   "div",
   null,
   React.createElement(
     "h1",
     null,
     "react",
   )
 );

당연한 거지만 첫번째 코드가 간결하고 쓰기 편하기 때문에 JSX를 쓰는 이유입니다.

1.감싸는 요소

import React, { Component } from 'react';

class MyComponent extends Component {
   render() {
       return (
         <h1>리액트</h1>
       );
   }
}

export default MyComponent;

위코드를 실행하면 어떻게 될까요?

네... 에러가 발생합니다 Faile to Compile 하면서요 (당연히 웹브라우저 개발자도구나 터미널에서 보여집니다)

그럼 어떻게 고쳐야할까요?

import React, { Component } from 'react';

class MyComponent extends Component {
   render() {
       return (
         <div>
           <h1>리액트</h1>
         </div>
       );
   }
}

export default MyComponent;

바로 부모요소인 div태그로 감싸서 처리해야됩니다 

왜 감싸야될까요? 바로 Virtual DOM에서 컴포넌트 변화를 감지해 낼때 효율적으로 비교 할 수 있도록 내부의 트리 구조는 하나여야한다는 규칙이 있습니다 

-Fragment

import React, { Component } from 'react';

class MyComponent extends Component {
   render() {
       return (
         <Fragment>
           <h1>리액트</h1>
         </Fragment>
       );
   }
}

export default MyComponent;

<div>태그 대신 <Fragment>태그를 통해서도 렌더링이 가능합니다 

2.if문 대신 조건부 연산자

import React, { Component } from 'react';

class MyComponent extends Component {
   render() {
     const codition = true;
       return (
         <div>
           <h1>리액트</h1>
           {
             condition ? '좋음' : '나쁨'
           }
         </div>
       );
   }
}

export default MyComponent;

IF문대신 3항 연산자를 통해 True면 좋은 false면 나쁨을 나타내는 것도 할 수 있습니다.

3. 꼭 닫아야 하는 태그

<form>
  성명 : <br>
  <input type="text" name="coname"><br>
  전화번호 : <br>
  <input type="number" name="conumber">
 </form>

input태그나 br태그같이 태그를 연후 닫지 않아도 되는 것은 웹브라우저가 저절로 인식하여 나타내 주지만

Virtual DOM을 사용하는 JSX에서는 구조를 만들지 못해 오류를 발생합니다 

꼭 닫아 주셔야됩니다 

<form>
  성명 : <br/>
  <input type="text" name="coname"/><br/>
  전화번호 : <br/>
  <input type="number" name="conumber"/>
 </form>

필수는 아니지만 배우면 React에 도움되는 JSX에 대해서 정리했습니다