JSX란?

jsx

jsx는 자바스크립트의 확장 문법이고, xml과 상당히 유사하게 생겼으며, 이런 형식으로 작성한 코드들은 브라우저에 실행되기전에 코드가 번들링 되는 과정에서 일반 자바스크립트의 형태로 변환됨

function App(){
	return (
    	<div>
        	hello <b>seok28</b>
        </div>
    );
}

위의 코드가 아래코드로 변환됨

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

위의 코드처럼 컴포넌트에서 렌더링 할때마다 React.createElement 함수를 사용해야 한다면 상당히 불편하므로 리액트의 jsx 문법을 사용하면 코드 작성시간을 절약할 수 있음

또한 jsx는 리액트로 개발할 때 사용되므로 공식 자바스크립트 문법이 아님

jsx 문법

1. 감싸인 요소
   컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 함

function App(){
	return(
    	<div>
          <h1>Hello</h1>
        </div>
    )
}

부모 요소 하나로 반드시 감싸야 하는 이유는 Virtual DOM 에서 컴포넌트의 변화를 감지 할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리로 구조로 이루어져야 하는 규칙이 있음

2. 자바스크립트 표현
   jsx가 내부에서 코드를 중괄호로 감싸면 자바스크립트 표현식을 작성할수 있음

function App(){
	const age = 25;
	return(
    	<>
          <h1>저의 나이는 {age} 입니다 </h1>
        <>
    )
}

3. 조건부 연산자
   jsx 내부의 자바스크립트 표현식에서 if 문 사용불가, 조건에 따른 다른 내용을 렌더링 할때는 jsx 밖에서 if문을 사용해 사전값 설정 및 중괄호 안에 조건부 연산자(삼항 연산자) 사용가능

function App(){
	const name = 'seok28';
	return(
    	<div>
        	{name === 'seok28'? (<h1>my name is seok28</h1>) : (<h2>my name isn't seok28</h2>)}
        </div>
    )
}

4. AND 연산자(&&) 를 이용한 조건부 렌더링
   특정 조건을 충족시킬때 내용을 보여주고 충족시키지 못할 때 아무것도 렌더링 하지 않을 상황이 필요할수 있는데, 조건부 연산자로 구현할 수 있지만 and 연산자를 사용하면 코드시간을 절약할수 있음

function App(){
	const name = 'seok28';
	return(
    	<div>
        	{name === 'seok28' && <h1>맞습니다.</h1>}
        </div>
    )
}

리액트에서 false와 null 값은 렌더링 되지 않음 하지만 0은 예외적으로 화면에 렌더링 됨

5. undefined를 렌더링 하지 않음
   리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안됨
   오류 발생확률이 높거나 오류 발생

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

결과는 오류 발생

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

함수에 리턴 값이 아닌 내부에 렌더링 하는 것은 오류가 발생하지 않음