[React] JSX

JSX

 JSX란 JavaScript를 확장한 문법으로 HTML 코드를 작성하는 것과 비슷하다.

ReactDOM.render(
  <h1>Hello, world!</h1>
);

위 코드를 보면 일반 자바스크립트만 사용한 코드에 비해 가독성이 높고 작성하기 쉽다는 특징이 있다.

💡 ReactDOM.render
ReactDOM.render는 컴포넌트를 페이지에 렌더링하는 역할을 한다. react-dom 모듈을 불러와 사용할 수 있는데, 페이지에 렌더링할 내용을 JSX 형태로 작성하고 해당 JSX를 렌더링할 document 내부 요소를 설정한다.

import ReactDOM from 'react-dom' // react-dom 모듈 불러오기

ReactDOM.render(
  <h1>Hello, world!</h1>
  document.getElementById('root') // id가 root인 요소 안에 렌더링
);

---

JSX 문법

부모 요소로 감싸기

 컴포넌트에 여러 요소가 있으면 부모 요소로 감싸야 한다. Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조여야 한다는 규칙이 존재하기 때문이다.

💡 DOM
노드 객체들로 구성된 트리 자료구조를 DOM(Document Object Model)이라 한다. 부모 노드와 자식 노드로 구성되어 노드 간의 계층적 구조를 표현하는 비선형 자료구조를 트리 자료구조라 하며, DOM은 노드 객체의 트리로 구조화되어 있기 때문에 DOM 트리라고도 부른다.

부모 요소로 감싸지 않으면 다음과 같이 오류 창이 뜬다.

return (
    <h1>Hello, world</h1>
    <h1>Hello, react</h1>
);

오류를 해결하기 위해 요소들을 부모 div 태그로 감싸주었다.

return (
    <div>
      <h1>Hello, world</h1>
      <h1>Hello, react</h1>
    </div>
);

불필요한 부모 요소를 만들고 싶지 않다면 <Fragment>를 사용하면 된다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다.

리액트를 불러올 때 Fragment를 불러와 사용하거나 <React.Fragment> 또는 <>(빈 태그)를 사용하면 된다.

// 방법 1
import React, {Fragment} from 'react';

return (
    <Fragment>
      <h1>Hello, world</h1>
      <h1>Hello, react</h1>
    </Fragment>
);

// 방법 2
return (
    <React.Fragment>
      <h1>Hello, world</h1>
      <h1>Hello, react</h1>
    </React.Fragment>
);

// 방법 3
return (
    <>
      <h1>Hello, world</h1>
      <h1>Hello, react</h1>
    </>
);

표현식 포함하기

 JSX 내에서는 JavaScript 표현식을 쓸 수 있다. JSX 내부에서 코드를 { }(중괄호)로 감싸면 된다.

const name = 'Pikachu';
return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
);

조건부 연산이 필요할 때는 JSX 밖에서 if 문이나 for 문을 사용하거나 JSX 내부 표현식에서 삼항 연산자를 사용해 조건부 렌더링을 할 수 있다.

// if 문
const name = 'Pikachu';
const color = true;
if (color) {
  return <h2>{name}의 색깔은?: 노랑</h2>;
} else {
  return <h2>{name}의 색깔은?: 파랑</h2>;
}

// 삼항 연산자
const name = 'Pikachu';
const color = true;
return (
  <div>
    <h1>Hello, {name}!</h1>
    <h1>{name}의 색깔은? : {color ? '노랑':'파랑'}</h1>
  </div>
);

인라인 스타일링

 DOM 요소에 스타일을 적용하고 싶을 때는 CSS 스타일을 Javascript 객체 형식으로 만들어 적용해야 한다. key는 CamelCase로 작성한다.

const name = 'Pikachu';
const color = true;
const style = {
    backgroundColor: 'yellow',
    width: 200,
    height: 300
};

return (
  <div>
    <h1>Hello, {name}!</h1>
    <h2>{name}의 색깔은? : {color ? '노랑':'파랑'}</h2>
    <div style={style}></div>
  </div>
);

className

 리액트에서는 요소에 class를 지정할 때 className을 사용해야 한다.

return (
  <div>
    <h1>Hello, {name}!</h1>
    <h2>{name}의 색깔은? : {color ? '노랑':'파랑'}</h2>
	<div className='ear'></div>
    <div style={style}></div>
  </div>
);

닫혀야 하는 태그

 JSX에서 태그는 꼭 닫혀있어야 한다. HTML 코드를 작성할 때는 input이나 br과 같은 태그는 닫지 않고 사용하기도 하지만 JSX에서 똑같이 사용하면 트리 형태의 구조를 만들지 못하기 때문에 input과 br도 예외 없이 태그를 닫아주어야 한다.

return (
  <div>
    <h1>Hello, {name}!</h1>
    <h2>{name}의 색깔은? : {color ? '노랑':'파랑'}</h2>
    <input type='text'/><br/>
  </div>
);

주석

 JSX 안에서 주석은 {/* */}와 같은 형식으로 작성한다. 중괄호 없이 /* */ 형태로 작성하게 되면 페이지에 그대로 렌더링된다. 열리는 태그 내부에서는 // 형태로도 주석 작성이 가능하다.