[React/JSX] JSX 소개

이전 포스트를 따라가며 만들 프로젝트 폴더를 보니 App.js라는 파일이 눈에 띕니다. 자바스크립트? 하면서 들어간 그 파일에는 다음과 같이 알 수 없는 코드들이 짜여있습니다.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

자바스크립트 같기도 하고, HTML같기도한 이 코드들을 알아보겠습니다.

---

1. JSX

JSX는 자바스크립트의 확장 문법입니다. 바닐라 자바스크립트, HTML, XML과 비슷하기도합니다. JSX는 이처럼 HTML 요소를 자바스크립트로 표현하고 변환하기 위해 등장한 문법입니다. 다음 자바스크립트 코드를 JSX로 바꿔쓰면 다음과 같이 바꿀 수 있습니다.

function func() {
  return React.createElement('p', 'react');
}	//자바스크립트

function func() {
  return (
    <p>react</p>
  );
}	//JSX

 

JSX코드는 실제로 실행할 때 위의 자바스크립트 코드로 해석되어 실행합니다. 하지만 우리가 쓰기에 아래의 JSX가 훨씬 직관적이고 편하죠? 이처럼 프로그래머의 편의를 위해 사용되고 있습니다.

 

 

2. JSX 장점

장점으로는 위에서 봤듯이 우리가 보고 이해하며, 작성하기에 JSX를 사용하는 것이 훨씬 좋다고 느낄 수 있습니다. 또한 추후에 다루겠지만 리액트 컴포넌트도 마치 HTML 태그처럼 <컴포넌트 />와 같은 식으로 사용하게 되는데 이 리액트 컴포넌트 또한 JSX에서 사용가능하다는 점 입니다.

 

 

3. JSX 문법

JSX도 몇 가지의 문법 규칙을 가지고 있습니다.

3-1. 요소 감싸기

return에 여러개의 요소가 있다면 반드시 하나의 요소로 감싸주어야합니다. 왜냐하면 리액트의 Virtual DOM에서는 컴포넌트 변화 감지 과정에서 효율적인 감지를 위해 컴포넌트는 하나의 트리로 구성해야한다는 규칙이 있기 때문입니다. 그래서 여러개의 요소가 올 때는 트리의 루트가 될 수 있는 하나의 요소를 추가해야합니다.

//오류 발생!!!
function App() {
  return (
      <h1>react</h1>
      <h1>react</h1>
  );
}

export default App;

//하나의 태그로 감싸주세요
function App() {
  return (
    <div>
      <h1>react</h1>
      <h1>react</h1>
    </div>
  );
}

export default App;

 

참고로 예시에서는 div로 넣었지만 div는 블록요소이기 때문에 자칫 원하지 않는 모양으로 결과가 나올 수 있습니다. 그럴 경우에는 리액트 v16 이상 부터 지원하는 Fragment 기능을 이용하면 됩니다 Fragment는 다음과 같이 사용할 수 있습니다.

function App() {
  return (
    <Fragment>
      <h1>react</h1>
      <h1>react</h1>
    </Fragment>
  );
}

export default App;

//또는
function App() {
  return (
    <>
      <h1>react</h1>
      <h1>react</h1>
    </>
  );
}

export default App;

 

3-2. 자바스크립트 표현식

JSX는 자바스크립트 표현식도 사용할 수 있습니다. 자바스크립트 표현식을 사용하고자 하는 곳에 {} 중괄호로 감싸주어 작성하면 됩니다.

function App() {
  const name = 'react';
  
  return (
    <Fragment>
      <h1>{name}</h1>
    </Fragment>
  );
}

export default App;

 

3-3. 삼항 연산자와 AND 연산자

삼항 연산자는 꽤 많이 들어보고 사용해본적이 있을 것입니다. 갑자기 JSX에서 언급한 이유는 무엇일까요. 이전에 배운 자바스크립트 표현식에서 if문을 사용할 수 없기 때문입니다. 그래서 JSX로 if문을 표현하고 싶다면, 표현식 {} 외부에서 if문 처리를 하거나 {} 내부에서 삼항 연산자를 이용해야합니다. 삼항 연산자의 기본적인 사용법은 다음과 같습니다.

조건? (TRUE일 때 실행할 코드): (FALSE일 때 실행할 코드)

 

AND 연산자(&&)를 이용해서 특정 조건에 따라 다른 내용을 렌더링 할 수 있습니다. 마찬가지로 if문 대신에 사용하기 좋은 문법입니다.

 

3-4. undefined 렌더링의 금지

리액트 컴포넌트는 undefined를 렌더링 하면 오류를 발생시킵니다. 그러므로 OR연산자나(||) 다른 조건을 주어서 undefined대신 다른 결과를 지정해서 오류를 방지해야합니다.

 

3-5. 인라인 스타일

리액트를 이용해서 DOM요소에 스타일을 넣으려고 한다면, 기존 자바스크립트나 HTML 방식처럼 문자열 형식으로 넣는 것이 아닌 객체 형태로 넣어야합니다. 이때 주의점은 font-size처럼 하이픈(-)이 들어가는 속성이름은 -를 빼고 카멜 케이스와 같은 작성법으로 작성해야합니다. (예. font-size => fontSize, background-color => backgroundColor 등)

function App() {
  return (
    <h1 style = {{
      backgroundColor: #000,
      fontSize: '5em',
    }}
    >
      react
    </h1>
  );
}

export default App;

 

 

3-6. 태그의 class 속성은 className으로 작성하기

기존에 태그에 class 속성을 지정해서 묶곤 했었는데 JSX에서는 class라는 키워드 대신 className이라는 키워드로 사용합니다.

//잘못된 작성
function App() {
  return (
    <p class = '클래스 이름'>
      react
    </p>
  );
}

export default App;

//올바른 작성
function App() {
  return (
    <p className = '클래스 이름'>
      react
    </p>
  );
}

export default App;

 

 

3-7. 태그 닫기와 self-closing 태그

HTML에서는 <input>이나 <br>같은 태그는 따로 </input>처럼 닫는 태그를 작성하지 않아도 됐었습니다. 하지만 JSX로 작성할 때는 이들 태그에 대해서도 반드시 닫아주어야 합니다.

단, input태그처럼 <input></input>사이에 들어갈 내용이 없는 태그들은 <input />과 같은식으로 태그를 열면서 동시에 닫을 수 있습니다. 이런 태그들을 self-closing 태그라고 합니다.

 

 

3-8. JSX의 주석

JSX에서 주석을 달 때는 자바스크립트 표현식을 이용합니다. {/**/}와 같은 식으로 중괄호로 자바스크립트 표현식을 열어주고 자바스크립트 주석 명령을 이용해서 주석을 작성합니다. 만약 표현식을 사용하지 않고 자바스크립트 주석(//, /* */)을 달게되면 주석이 그대로 드러나게 됩니다. 

function App() {
  return (
    {//주석은 이렇게}
    {/*또는 이렇게*/}
    
    //주석을 이렇게
    /*
      또는 이렇게 쓰면
      그대로 나타납니다.
    */
  );
}

export default App;

위 예제에서는 티스토리 코드 입력 설정이 자바스크립트라 주석처리된 것 처럼 나타났습니다. 실제로 리액트를 이용해서 구동해보면 정상적인 결과가 출력됩니다.

---

이렇게, JSX 기본까지 마쳤으니 이제 리액트를 본격적으로 작성할 준비가 되었습니다. 다음 포스트부터 리액트 컴포넌트로 시작해 본격적인 리액트를 공부해보겠습니다.

 

참조

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

https://react.vlpt.us/basic/04-jsx.html

4. JSX · GitBook