JSX

JSX ( JavaScript XML ) 란 ?

JavaScript의 확장 문법으로써 리액트에서 사용할 수 있는 문법을 의미합니다.

JSX는 바벨이라는 도구를 이용하여 일반 자바스크립트 형태의 코드로 변환합니다.

JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아닙니다. 

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

=====

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

리액트에서는 위와 같이 작성된 문법을 아래와 같은 코드형태로 변경시킵니다.

만약 컴포넌트를 렌더링할 때마다 JSX 코드를 매번 React.createElement 함수를 사용해야 한다면 매우 불편할 것입니다.

JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있습니다.

 

JSX의 장점

1) 보기 쉽고 익숙하다

위와 같이 일반 자바스크립트만 사용한 코드와 JSX로 작성한 코드를 비교해 보았을 때 JSX를 사용하는 것이 가독성이 더 높습니다.

HTML 코드를 작성하는 것처럼 return 안에 넣을 수 있기 때문입니다. 또한 JavaScript에서 선언한 변수를 사용할 때에도 더욱 더

편리하게 데이터를 넣을 수 있다는 장점이 있습니다.

 

2) 더욱 높은 활용도

JSX에서는 우리가 알고 있는 div나 span과 같은 HTML 태그를 사용할 수 있을 뿐 아니라, 앞으로 만들 컴포넌트 역시 JSX 안에서

작성할 수 있습니다.

 

JSX 문법

JSX는 정말 편리한 문법이지만 올바르게 사용하기 위해서는 몇 가지 수칙을 준수해야 합니다.

 

1) 감싸인 요소

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

function App() {
  return (
    <div>
      <h1>리액트</h1>
      <h2>공부하기</h2>
    </div>
  )
}

위의 예시와 같이 <h1> 태그와 <h2> 태그를 <div> ... </div> 를 통해 감싸는 문법을 통해 작성해야 오류가 발생하지 않습니다.

위와 같이 요소들을 감싸주는 이유는 Virtual DOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록

컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.

 

2) 자바스크립트 표현

위의 더욱 높은 활용도 부분에서도 이야기 했던 것처럼 자바스크립트 표현식을 쓸 수 있습니다. 자바스크립트 표현식을 작성하기 위해서는

JSX 내부에서 코드를 { ... } 로 감싸면 됩니다.

function App() {
  const name = '리액트';
  return (
    <div>
      <h1>{name} 안녕 ! </h1>
      <h2>나는 {name} 이라고 해 ! </h2>
    </div>
  )
}

위와 같이 자바스크립트에서 선언한 name 이라는 변수를 return 내에서 중괄호로 감싸줌으로써 자바스크립트 값을 JSX 안에서

렌더링할 수 있습니다.

 

3) If문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수는 없습니다. 하지만 조건에 따라 다른 내용을 렌더링할 경우가 생기는데

위의 경우 { ... } 안에 조건부 연산자 사용을 통해 조건부 렌더링을 할 수 있습니다.

function App() {
  const name = '리액트';
  return (
    <div>
      {name === '리액트' ? 
        ( <h1>리액트입니다.</h1> )
        :
        ( <h2>리액트가 아닙니다.</h2> )
      }
    </div>
  )
}

위의 방식과 같이 삼항연산자를 이용하여 조건부 렌더링을 할 수 있습니다.

 

4) 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다.

스타일 이름 중에서 background-color 처럼 - 문자가 포함되는 이름이 있는 경우 - 문자를 없애고 카멜 표기법(camelCase)으로

작성해야 합니다. background-color => backgroundColor로 작성해야 합니다.

function App() {
  const style = {
    backgroundColor : 'black',
  }
  
  return <div style={style}>REACT</div>;
}

5) class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때는 <div class="ABC"></div> 와 같이 class 라는 속성을 설정합니다.

하지만 JSX에서는 className을 통해 설정해 주어야 합니다.

function App() {
  return <div className= "ABC">REACT</div>;
}



6) 꼭 닫아야 하는 태그

HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 합니다. 예를 들면 input HTML 요소는

<input>과 같이 닫는 태그 없이도 동작하기도 합니다. 하지만 JSX의 경우 태그를 닫지 않으면 오류가 발생하게 됩니다.

그래서 JSX의 경우에는 <input></input> 과 같이 작성해도 되지만 태그 사이에 별도의 내용이 들어가지 않는 경우에는

self-closing 태그를 사용합니다. 태그를 선언하면서 동시에 닫을 수 있는 태그를 의미합니다.

function App() {
  return (
    <div>
      <div className = "react">REACT</div>
      <input />
    </div>
  )
}