JSX 문법

JSX (JS+XML)

자바스크립트의 확장 문법이며 XML 과 거의 비슷합니다. 이렇게 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변형이 됩니다. 

 

function App(){
	return (
    	<div>
        	Hello <b><react/b>
    	</div>
    );
}

 

이렇게 작성된 코드가 다음과 같이 변환 됩니다. 

 

function App(){
	return React.createElement("div",null,"Hello ",React.createElement("b",null,"react"));
}

 

만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는것이 아니라 위 코드처럼 매번 React.createElement 함수를 사용해야 한다면 매무 불편할 것입니다. JSX를 사용하면 UI를 매우 편하가 랜더링이 가능합니다. 

 

 

 

그렇다면 JSX 는 어떻게 사용해야 할까? 

 

JSX 문법 

다음과 같이 코드를 작성하면 Error 출력이 됩니다. 

import React from 'react';

function App() {
     return (
          <h1>React Hello world</h1>
          <h2>Test ReactS</h2>
     );
}

 

 

요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 에러 발생한것입니다.  위와 같은 에러는 2가지로 해결이 가능합니다.

• div 태그로 묶기 
• Fragment  라는 기능을 이용 

2번째 방법인 Fragment 통해서 묶은 코드 입니다. 

 

function App() {
     return (
          <Fragment>
               <h1>React Hello world</h1>
               <h2>Test ReactS</h2>
          </Fragment>
     );
}

 

그렇다면 왜 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 감싸야 하는 질문이 있을수 있습니다. 그 이유는 Part 1 에서 본 VirtualDOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 한다는 Rule 이 있어서 입니다. 

 

Fragement 대신 <> 로 표현이 가능합니다.  가독성을 위해 <> 로 많이 표시를 합니다. 

function App() {
     return (
          <>
               <h1>React Hello world</h1>
               <h2>Test ReactS</h2>
          </>
     );
}

웹사이트에는 다음과 같이 출력이 됩니다. 

 

 

if 문 대신 조건무 연산자 

JSX 내부의 자바스크립트 표현식에는 if 가 없습니다. 하자만 조건에 따라 렌더링을 해야할때 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나,{}안에 조건무 연산자를 사용하면 됩니다

 

function App() {
     const name = "React";
     return (
          <Fragment>
               {name === "react" ? (
                    <h1>Name is React</h1>
               ) : (
                    <h1>Name isn't React</h1>
               )}
               ;
          </Fragment>
     );
}

 

.

 

 

인라인 스타일링 

리액트에서 DOM 요소에 스타일을 적용할때 문자열 형태롤 넣는것이 아니라 객체 형태롤 넣어주어야 합니다. 이때 background-color 처럼 - 문자가 포함되는 이름이 있다면 카멜 표기법으로 backgruondColor로 작성해야 합니다. 

 

function App() {
     const name = "React";
     const style = {
          backgroundColor: "black",
          color: "aqua",
          fontSize: "48px",
          fontWeight: "bold",
          padding: 16,
     };
     return <div style={style}>{name}</div>;
}

 

그리고 React 에는 꼭 닫아야 하는 태그가 있습니다.  <input> 과 같은 태그는 꼭 닫아줘야 리액트에서 실행됩니다. 

function App() {
     const name = "React";
     const style = {
          backgroundColor: "black",
          color: "aqua",
          fontSize: "48px",
          fontWeight: "bold",
          padding: 16,
     };
     return (
          <>
               <div style={style}>{name}</div>
               <input />
          </>
     );
}

 

 

여기까지 React  JSX 관련된 문법과 인라인 스타일링에 관하여 정리하였습니다. 긴글읽어주셔서 감사합니다.