2. JSX 란

1. JSX 란?

JSX는 자바 스크립트 확장 문법이며 XML 비슷 하게 생겼지만 자바스크립트 문법은 아니다.

리액트는 JSX 를 통해 번들링 해서 사용하기 편하게 만들어 졌다고 생각 하면된다.

 

JSX 문법

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

javascript 문법

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

비교 한거와 같이 JSX 문법을 사용 하게 되면 좀더 쉽게 사용 할수 있다. 하지만 JSX를 쓰기 위해서는 몇가지 규칙이 존재한다.

 

1. 컴포넌트에 여러 요소가 있다면 반드시 부로 요소 하나로 감싸야한다. (여러개를 하나의 요소로 감싸서 사용 하는 이유는  Virtual DOM에서 컴포넌트 변화를 감지 해낼떄 효율적으로 사용 하기 위에서 규칙 존재)

function App()
{
	return (
    	1. div 를 사용
        <div> //부모요소로 감싸준다. 
        	<h1>리액트 하이</h1>
            <h2>리액트 하이</h2>
        </div>
        
        2. div 를 생략 하고 사용 한다.
        <> //부모요소로 감싸준다. 
        	<h1>리액트 하이</h1>
            <h2>리액트 하이</h2>
        </>
    )
}

2. JSX 에서 javascript 문법 

improt React from 'react';

function App() 
{
	const name = '리액트';
    return (
    	<>
        	<h1>{name} 하이</h1>
            <h2>잘 작동 하니</h2>
        </>
    )
}

3. if 문 대신 조건부 연산자( {} 안에  () 사용 하는경우는 줄바꿈이 일어나서 코드를 작성 할때 사용) 

improt React from 'react';

function App() 
{
	const name = '리액트';
    return (
    	<>
        1. 
        { name === '리액트' ? (<h1>리액트 입니다.</h1>) : (<h1>리액트 아닙니다.</h1>)};
        2.
        { name === '리액트' ? <h1>리액트 입니다.</h1> : null };
        3. 
        { name === '리액트' && <h1>리액트 입니다.</h1>};
        
        </>
    )
}

4. undefined 를 렌더링 하지 않는다.

improt React from 'react';

function App() 
{
	const name = undefined;
    return (
 		return name;  //오류 발생 
        해결방법
        1. OR 연산자 사용
        return name  || '값이 undefined'입니다.;
        2. JSX 내부에서 undefined 사용 
        return <div>{name}</div>
        3. JSX 내부에 OR 연산자 사용 (name 값이 undefined 일떄 보여줄경우)
        return <div>{name || '리액트'}</div>
    )
}

5. 인라인 스타일은 객체로 반환 (카멜 표기법 사용)

ex ) font-size => fontSize 

 

6. class 대신 className 을 사용

 

7. 꼭닫아야 하는 태그가 존재함 

<input> => <input />

<br> => <br />

<p>  => <p />

 

8. 주석 사용법 

 

평소에 javascript 사용하는 주석 방법

1. // 

2. /* */

 

JSX 주석

1. { /* 주석을 사용한다. */}

 

 

이와 같이 몇가지 규칙이 존재 하지만 규칙 특별하게 어렵지 않고 사용 하다 보면 익숙해 져서 편안하게 사용이 가능 할라꺼라고 생각한다.