3 min to read

[React] JSX in React

Featured image

React는 JSX(JavaScript와 XML)라는 문법을 사용한다.

JSX 란?

const jsx = <h1>This is JSX</h1>

위의 예는 간단한 JSX 코드다. 그러나 이 코드는 JavaScript 가 아니기 때문에 브라우저는 코드를 이해하지 못할 것 이다. 따라서 브라우저가 이해할 수 있는 JavaScript 코드로 변환하기 위해서 Babel 과 같은 도구가 필요하다.

React 에서 기본적으로 아래와 같은 JSX를 작성한다.

class JSXDemo extends React.Component {
    render() {
        return <h1>This is JSX</h1>;
    }
}

ReactDOM.render(<JSXDemo />, document.getElementById('root'));

JSX 에서는 ReactDom.render 함수를 사용하여 화면에 렌더링 하는데, babel 은 이를 React.createElement 를 사용하여 해석할 수 있다.

JSX 내에서 JavaScript 코드 작성 방법

JSX 는 HTML 내부에서 JavaScript 코드를 실행할 수 있어 실용적이다. 아래의 예시처럼 중괄호 { } 를 사용하여 JavaScript 코드(로직, 함수, 변수 등)을 직접 사용할 수 있다.

// example1
function App() {
  const text = 'Hello World';
  
  return (
    <div className="App">
      <p> {text} </p>
    </div>
  );
}

// example2
render() {
    if(true) {
        return <p>YES</p>;
    } else {
        return <p>NO</p>;
    }
}

JavaScript 형태로 작성하는 코드중에서 JSX 에 유효한 문법과 유효하지 않은 문법들이 존재하는데,

유효한 문법:

  • 문자(“hello”), 숫자(10), 배열([1,2,3,4])
  • 어떤한 값이 있는 객체 속성
  • 어떠한 값을 반환하는 함수
  • 항상 새로운 배열을 반환하는 map 함수 (Array.map)
  • JSX 자체

유효하지 않은 문법:

  • for loop, while loop 등 의 loop
  • 변수 선언
  • 함수 선언
  • if 조건
  • 객체

또 다른 특징으로 undefined, null, boolean 값은 JSX의 UI에 표시되지 않는다.

const App = () => {
  const isAdmin = true;
  return (
    <div>
      <p>isAdmin is {`${isAdmin}`} </p>
      {/* 위의 코드는 isAdmin is true 가 출력된다. */}
      <p>isAdmin is {isAdmin} </p>
      {/* 위의 코드는 isAdmin is 가 출력된다.*/}
    </div>
  );
};

JSX에서는 if 조건문을 사용할 수 없지만 논리연산자 와 삼항연산자를 활용하여 조건문을 표현할 수 있다.

<p>{a > b ? "Greater" : "Smaller"}</p>
<p>{shouldShow && "Shown"}</p>

JSX 기본적인 작성 룰

// Bad
return (
    <p>Hello</p>
    <p>World</p>
)

// Good
return (
  <div>
    <p>Hello</p>
    <p>World</p>
  </div>
);

// Good
return (
  <>
    <p>Hello</p>
    <p>World</p>
  </>
);

Reference