[React] JSX 문법

리액트에서 사용하는 자바스크립트 확장 문법인 JSX를 올바르게 사용하기 위해 준수해야 할 몇 가지 규칙과 문법을 알아보자.

---

1. 감싸인 요소

 컴포턴트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 아래와 같이 작성할 수 없다는 이야기이다.

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

function App() {
  return (
    <h1>리액트 안녕</h1>
    <h2>잘 작동하니?</h2>
  );
}

export default App;

 

위 코드는 2개 이상의 컴포넌트를 감싸는 부모 요소가 없기 때문에 오류가 난다. 

 

아래와 같이 div 태그로 감싸거나,

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

function App() {
  return (
      <div>
        <h1>리액트 안녕</h1>
        <h2>잘 작동하니?</h2>
      </div>
  );
}

export default App;

 

혹은 리액트 v16부터 제공하는 Fragment 기능을 사용할 수도 있다.

import logo from './logo.svg';
import './App.css';
import {Fragment} from "react";

function App() {
  return (
      <Fragment>
        <h1>리액트 안녕</h1>
        <h2>잘 작동하니?</h2>
      </Fragment>
  );
}

export default App;

 

Fragment는 아래와 같은 형태로도 표현할 수 있다.

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

function App() {
  return (
      <>
        <h1>리액트 안녕</h1>
        <h2>잘 작동하니?</h2>
      </>
  );
}

export default App;

---

2. 자바스크립트 표현

JSX 안에서 자바스크립트 표현식 또한 사용이 가능하다. 아래와 같이 변수를 { } 로 감싸면 된다.

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

function App() {
    const name = '리액트';
  return (
      <>
        <h1>{name} 안녕</h1>
        <h2>잘 작동하니?</h2>
      </>
  );
}

export default App;

---

3. if 문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없다. 하지만 조건에 따라 다른 내용을 렌더링해야 할 때는 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용하면 된다. 

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

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

export default App;

---

4. AND 연산자를 사용한 조건부 렌더링

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

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

export default App;

위와 같이 조건부로 아무것도 리턴하지 않아도 되는 경우에는 && 연산자를 사용하여 나타낼 수 있다.

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

function App() {
    const name = '리액트';
  return (
      <>
          {name === '리액트' && <h1>리액트입니다.</h1>}
      </>
  );
}

export default App;

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다. 

 

하지만 아래와 같이 0을 렌더링할 때는 0으로 나타나니 주의하자.

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

function App() {
   const num = 0;
   return (
      <>
          {num && <h1>리액트입니다.</h1>}
      </>
  );
}

export default App;

---

5. undefined를 렌더링하지 않기

 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다. 

 

즉, 아래 코드는 오류를 발생시킨다.

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

function App() {
   const name = undefined;
   return name;
}

export default App;

 

만약 어떤 값이 undefined일 수도 있다면, || 연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있다.

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

function App() {
   const name = undefined;
   return name || "값이 undefined 입니다.";
}

export default App;

---

6. 인라인 스타일링

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

스타일 이름 중에서 background-color 처럼 - 문자가 포함되는 이름이 있다면 - 문자를 없애고 camel Case로 작성해야 한다.

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

function App() {
   const name = 'React';

   const styles = {
      backgroundColor: 'black',
      color: 'aqua',
      fontSize: '48px',
      fontWeight: 'bold',
      padding: 16
   };

   return <div style = {styles}> {name}</div>
}

export default App;

---

7. class 대신 className

 일반 HTML 에서 CSS 클래스를 사용할 때는 <div class="myClass"></div> 와 같이 class라는 속성을 설정하지만, JSX 에서는 class가 아닌 className으로 설정해 줘야 한다.

 

App.css 에서 클래스 Selector를 하나 만들어 준 뒤에 확인해보자.

.react {
  background: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

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

function App() {
   const name = 'React';

   return <div className="react"> {name}</div>
}

export default App;

---

8. 꼭 닫아야 하는 태그

 HTML 코드를 작성할 때 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 한다. 대표적으로 <input> 태그는 굳이 닫지 않고 코드를 작성해도 잘 동작하지만, JSX에서는 태그를 닫지 않으면 오류가 발생한다.

 

반드시 아래와 같이 태그를 닫아주거나, self-closing 태그를 사용하여 닫아야 한다.

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

function App() {
   const name = 'React';

   return (
       <>
          <div className="react">{name}</div>
          <input></input>
       </>
   );
}

export default App;

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

function App() {
   const name = 'React';

   return (
       <>
          <div className="react">{name}</div>
          <input />
       </>
   );
}

export default App;

---

9. 주석

 JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 주석을 작성할 때와는 조금 다르다.

 

자바스크립트 영역에서는 일반 자바스크립트와 동일하게 주석을 작성하면 되지만, JSX 영역 내에서는 { }로 주석을 한번 더 감싸주지 않으면 페이지에 그대로 주석이 노출된다.

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

function App() {
  /* const name = 'RRRR';*/
   const name = 'React';

   return (
       <>
          {/*<div className="react">{name}</div>*/}
          <input />
       </>
   );
}

export default App;

 

 

 

끝!