[ReactJS] - JSX 문법의 특징

오늘은 JSX를 사용함에 있어 여러 가지 준수해야 할 문법 규칙에 대해서 알아보도록 하려고 한다.

혹시 JSX란 어떤 것인가를 모르시는 분들이라면 아래 글을 먼저 읽고 오는 것을 추천한다.

 

https://luka-frontend.tistory.com/9?category=1023680 

[ReactJS] - JSX란? (소개, 문법) - 기초

---

JSX 문법

 

1. 컴포넌트에 여러 요소들이 있다면 반드시 부모 하나가 감싸는 형태여야 한다.

//잘못된 예시
function Container(){
    return(
        <h1>안녕</h1>
        <h2>나는Luka야</h2>
    )
};

결과 에러가 발생한다.

 

//올바른 예시
function Container(){
    return(
    	<div>
         <h1>안녕</h1>
         <h2>나는Luka야</h2>
        </div>
    )
};

올바른 예시는 위의 코드 처럼 부모 요소로 여러 요소들을 감싸주어야 한다.

 

이렇게 감싸는 이유는, 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 이 있기 때문이다.

 

 

 

2. 자바스크립트 표현식

function Container() {
	   const name = "luka"
       return(
           <div>
           <h1>hi</h1>
           <h2>{name}</h2>
           </div>
       )
   }

JSX의 중괄호{ } 안에는 유효한 모든 자바스크립트 표현식을 작성할 수 있다.

 

 

3. 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문 또는 for문을 사용할 수 없고 삼항 연산자를 사용한다.

 

function Container() {
       const name = 'luka';
       return (
           <div>
            {name === 'luka'? (<h1>he is luka</h1>) : (<h1>he is lukhaa</h1>)}
           </div>
       )
   }

출력결과

 

 

 

Ref. '리액트를 다루는 기술' - 김민준 [길벗]

http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9791160508796 

리액트를 다루는 기술 - 교보문고