JSX 문법

JSX란?

• 자바스크립트의 확장 문법
• 자바스크립트의 공식적 문법이라고는 할 수 없음
• 브라우저 실행 전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨

 

예시)

• 변환 전

function App(){
	return (
    	<div> react <span> practice <span> </div>
    )
}

 

• 변환 후

function App(){
	return React.createElement("div", null, "react", 
     	 	 React.createElement("span", null, "practice"))
}

 

 

---

 

JSX 문법 규칙 및 사용 방법

 

1. 컴포넌트에 여러 요소가 있을 경우 반드시 부모 요소가 감싸는 형태여야 한다.

function App(){
	return (
    	<div>
        	<h1>자식</h1>
            <h3>자식</h3>
        </div>
    )
}

 

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

 

---

 

2. 자바스크립트 표현

 

JSX 내부에서 코드를 {}로 감싸면 자바스크립트 표현식을 사용할 수 있다.

 

function App(){
	const name = "홍길동";
    return (
    	<div>
        	<h1>{name}</h1>
        </div>
    )
}

 

: name을 {}안에  넣어 렌더링 할 수 있다.

 

---

 

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

 

function App(){
	const name = "react";
    return (
    	<div>
     	   {name == 'react' ? 
                (<h1> this is react </h1>)
                :
                (<hi> this isn't react </h1>)
            }
        </div>
    )
}

 

+ AND 연산자로도 가능

 

function App(){
	const name = "react";
    return (
    	<div>
        	{name == 'react' && <h1> this is react </h1>}
        </div>
    )
}

 

: && 연산자로 조건부 렌더링이 가능한 이유는 리액트에서 false를 렌더링 할 때 null과 마찬가지로 아무것도 나타나지 않기 때문. 하지만 falsy한 값인 0은 예외적으로 화면에 나타남.

 

const number = 0;
return number && <div> count : {number} <div>

 

위 코드 실행 시 count 숫자를 보여주는 게 아닌 숫자 0을 보여준다.

 

---

 

4. undefined 렌더링 하지 않기

 

리액트에서는 undefined를 렌더링하면 안된다.

 

function App(){
	const name = undefined;
    return name;
}

 

단, JSX 내부에서 undefined를 렌더링 하는 건 오류 나지 않음.

 

function App(){
	const name = undefined;
    return {
    	<div>{name}</div>
    }
}

 

OR 연산자를 통해 방지해보자.

 

function App(){
	const name = undefined;
    return name || '값은 undefined가 될 수 없음';
}

 

---

 

5. HTML에서 스타일을 지정할 때 background-color와 같이 - 를 사용하는 이름을, JSX에서는 카멜 표기법으로 작성한다.

 

function App(){
	const style = {
    	backgroundColor : 'white',
        fontSize : '10px',
        fontWeight : 'blod'
    }
    
    return (
    	<div style={style}> 테스트 </div>
    )
}

 

---

 

6. JSX에서는 HTML과 달리 class이름을 지정할 때 className으로 지정한다.

 

<div className="jsxTest"></div> // JSX
<div class="HtmlTest"></div> //HTML

 

---

 

7. JSX에서는 태그를 반드시 닫아줘야 한다.

 

<input/>
<input></input>

 

---

 

8. 주석 작성 법

 

• JSX 내에서 주석을 작성할 때는 {/*...*/}와 같은 형식으로 작성한다.
• 시작 태그를 여러 줄로 작성 시, 그 내부에서 //를 사용하여 주석을 사용할 수 있다.

<div>
	clasName="jsxTest" // 주석 가능 ~
</div>