JSX란?

jsx(Javascript XML)은 Javascript에 XML을 추가 확장한 문법이다. JSX는 리액트로 프로젝트를 개발할 때만 사용되기 때문에 공식 javascript 문법은 아닙니다. JSX는 브라우저에서 실행되기 전에 Babel을 사용하여 일반 javascript 형태의 코드로 변환이 됩니다.

JSX 문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.(귀찮음)

Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부에는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있습니다.

이 때 별도의 노드를 추가하지 않고 여러 자식을 그룹화 하기 위해 React에서 제공하는 Fragment를 사용할 수 있습니다.

에러코드

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

정상코드

function App(){
	return(
        <React.Fragment>
          <div>Hello</div>
          <div>World</div>
        </React.Fragment>
    )
}

정상코드(단축형)

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

자바스크립트 표현식

JSX 안에서도 자바스크립트 표현식을 사용할 수 있습니다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸주면 됩니다.

function App(){
  const name = "hoon";
	return(
        <>
          <div>Hello</div>
          <div>{hoon}</div>
        </>
    )
}

조건부 연산자(삼항 연산자)

if 구문과 for 루프는 Javascript 표현식이 아니기 때문에 JSX 내부에서 사용할 수 없습니다.

그렇기 때문에 조건부에 따라 다른 렌더링이 필요할 시에는 JSX 주변 코드에서 if문을 사용하거나 혹은 삼항 연산자를 사용해야 합니다.

삼항 연산자 사용

function App(){
  const name = "hoon";
	return(
        <>
          <div>Hello</div>
        	{name !== undefined ? <div>{hoon}</div> : <div>world</div>}
        </>
    )
}

AND 연산자 사용

function App(){
  const name = "hoon";
	return(
        <>
          <div>Hello</div>
        	{name !== undefined && <div>{hoon}</div>}
        </>
    )
}

즉시실행함수 사용

function App(){
  const name = "hoon";
	return(
        <>
          <div>Hello</div>
          {() => {
			if(name !== undefined) return <div>{name}</div>;
          }}
        </>
    )
}

JSX 스타일링

inline styling

JSX에서 자바스크립트의 문법을 사용하려면 {}을 사용하기 때문에 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다. 또한 하이픈(-)을 사용하지 않고 카멜 표기법으로 작성해야 합니다.

function App(){
  const name = "hoon";
  const style = {
    	backgroundColor: 'green',
        fontSize: '12px'        
  }
	return(
        <>
          <div style = {style}>Hello</div>
        </>
    )
}

className

일반 Html에서는 CSS 클래스를 사용할 때 class라는 속성을 사용하지만 JSX에서는 class가 아닌 className을 사용합니다.

function App(){
  const name = "hoon";
	return(
        <>
          <div className = "header">Hello</div>
        </>
    )
}