REACT JSX

JSX 란?

JSX는 자바스크립트의 확장 문법이며 XML과 비슷하게 생겼습니다.
JSX로 작성된 코드는 실행되기 전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됩니다.

  
function App() {
  return (
    <div>
      <h2>HELLO REACT</h2>
    </div>
  );
}

JSX로 작성된 코드를 일반 JS로 작성해 보면 이런식으로 복잡하게 작성하게 됩니다. 이를 편하게 작성하기 위해 JSX를 사용합니다.

  
function App() {
  return React.createElement("div", null, React.createElement("h2", null, "HELLO REACT"));
}

JSX 장점

1.가독성이 좋다

JS로 작성한 것과 JSX를 비교해 보면 누가 봐도 JSX가 쉽고 가독성이 좋다는걸 알 수 있습니다.
HTML과 매우 비슷해서 익숙하기 까지 합니다.

2.높은 활용도

JSX에서는 div, span 같은 HTML 태그를 사용할 수 있을 뿐만 아니라 컴포넌트를 HTML 태그 쓰듯이 JSX 안에서 작성할 수 있습니다.

JSX 문법 규칙

감싸인 요소

컴포넌트에 여러 요소들이 있으면 이 요소들은 반드시 부모요소 하나로 감싸야 합니다.

감싸진 요소가 없다면 오류가 발생하게 됩니다.

  
function() {
return (
  <h1>HELLO</h1>
  <h2>REACT</h2>
)
}

여러 요소가 있다면 항상 부모 요소로 감싸줘야 합니다.

  
function() {
return(
  <div>
     <h1>HELLO</h1>
     <h2>REACT</h2>
  </div>
)
}

이런 방식을 사용해야 하는 이유는 Virtual DOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

JS 표현

JSX는 DOM 요소들을 렌더링 하는 기능 외에 JSX 안에서 자바스크립트 표현식을 사용할 수 있습니다. 사용 방법은 JSX 내부에 {}로 감싸면 됩니다.

  
function() {
  const name = "REACT";

  return(
    <div>
      <h1>HELLO</h1>
      <h2>{name}</h2>
    </div>
  )
}

{ } 안에 변수를 넣으면 브라우저에서 HELLO REACT로 나오게 됩니다.

IF문 대신 조건부 연산자

JSX 내부에서는 if문을 사용하지 못합니다. JSX 밖에서 if문을 사용하여 값을 만들어 사용하던가 { } 안에 삼항 연산자를 이용하여야 합니다.

  
function(){
  const name = "REACT"
  return(
    <div>
      { name === "REACT" ? (<h1>맞습니다.</h1>) : (<h1>아닙니다.</h1>)}
    </div>
  )
}

name === REACT true 이므로 맞습니다가 보여지게 되고 문자열 REACT가 아닌경우 아닙니다를 보여줍니다.

AND 연산자( && )를 사용한 조건부 렌더링

특정 조건을 만족할 때 보여주고, 만족하지 않는 경우 아무것도 렌더링 하지 않아야 하는 상황에서도 조건부 연산자를 통해 구현이 가능합니다.

  
function(){
  const name = "REACT"
  return { name === "REACT" && <h1>맞습니다.</h1>}
}

AND 연산자를 사용해 전자가 true면 후자를 반환하고 false면 전자를 반환 시킵니다.
위에 코드는 true이므로 후자가 반환되어 브라우저에 맞습니다가 나타납니다.

undefined를 렌더링 하지 않기

리액트 컴포넌트에서는 undefined를 렌더링하는 상황을 만들면 오류가 발생하게 됩니다. 값이 undefined일 수도 있다면 OR( || ) 연산자를 사용해 오류를 방지할 수 있습니다.

  
function() {
  const name = undefined;
  return {name || <h1>undefined가 맞습니다.</h1>}
}

OR 연산자는 전자가 true면 전자를 반환하고 false면 후자를 반환 시키며 위에 코드는 undefined가 false로 인식이 되므로 후자가 반환이 됩니다.

인라인 스타일링

리액트에서 스타일을 적용할 때는 객체 형태로 작성해야 합니다. 주의 할 점은 font-size와 같은 하이픈(-) 같은 문자가 포함되어 있는 속성은 하이픈(-)을 빼고 카멜 표기법으로 표기해줘야 합니다.

  
function (){
  const name = "REACT"
  const style = {
    fontSize : '10px'
    backgroundColor : 'blue'
  }
  return <div style ={style}> {name} </div>
}

class 대신 className

JSX에서는 class가 아닌 className으로 사용해야 합니다.

  
function(){
  return(
    <div>
      <h1 className = "hi">HEELO REACT</h1>
    </div>
  )
}

태그는 꼭 닫아야 합니다.

JSX는 태그가 항상 닫혀 있어야합니다. <input></input> 같이 태그 안에 내용이 들어가지 않는 경우에는 <input /> 이렇게 작성도 가능합니다. 이를 self-closing이라고 합니다.

주석

JSX 안에서의 주석은 자바스크립트에서의 주석과는 다릅니다. 자바스크립트의 주석처럼 //, /**/ 를 사용하게 되면 브라우저에 표시가 됩니다. JSX 안에서의 주석은 항상 { } 안에 적어야 합니다.

REACT JSX