JSX

내일배움캠프 LGLG!

5주차(주특기 입문 - React)

JSX란

• 자바스크립트의 확장 문법
• XML과 매우 유사하며, 브라우저에서 실행되기 전에 코드가 번들링되는 과정에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

JSX 문법 규칙

1. 감싸인 요소
   

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

   Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있다.

// 잘못된 코드
import React from 'react';

App(() => {
  return (
    <h1>Hello</h1>
    <h2>React</h2>
  )
})

export default App;

// 올바른 코드
import React from "react";

App(() => {
  return (
    <>
      <h1>Hello</h1>
      <h2>React</h2>
    </>
  );
});

export default App;

1. 자바스크립트 표현
   JSX가 내부에서 코드를 {}로 감싸면 자바스크립트 표현식을 작성할 수 있다.

import React form 'react';

App(() => {
  const name = 'react';
  return (
    <>
    <h1>Hello</h1>
    <h2>React<>
    </>
  )
})

export default App;

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

import React from "react";

App(() => {
  const name = "react";
  return (
    <div>
      {name === "react" ? <h1>This is React</h1> : <h2>This isn't React</h2>}
    </div>
  );
});

export default App;

1. AND 연산자(&&)를 사용한 조건부 렌더링
   특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야 하는 상황이 올 수 있다.
   조건부 연산자(삼항 연산자)로 구현할 수 있지만 AND 연산자를 사용하면 더 짧은 코드로 똑같은 작업을 할 수 있다.

import React from "react";

App(() => {
  const name = "react";
  return <div>{name === "react" && <h1>It's correct</h1>}</div>;
});

export default App;

위 코드를 실행 시 브라우저에 아무것도 나타나지 않을 것이다.

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리엑트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
여기서 한 가지 주의해야 할 점은 falsy한 값은 0은 예외적으로 화면에 나타난다는 점이다.

const number = 0;
return number && <div>내용</div>;

위 코드는 화면에 ‘내용’을 보여주는 것이 아니라 숫자 0을 보여준다.

1. undefined를 렌더링하지 않기
   리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안 된다.
   예를 들어 다음과 같은 코드는 오류를 발생시킨다.

import React from "react";
import "./App.css";

App(() => {
  const name = "undefined";
  return name;
});

export default App;

코드를 저장한 후 브라우저를 확인해보면 다음과 같은 오류를 볼 수 있다.

App(...): Nothing was returned from render. This usually means a return statement is missing.
Or, to render nothing, return null

어떤 값이 undefined일 수도 있다면, OR(

)연산자를 사용하면 해당 값이 undefined일 때 사용할 값을 지정할 수 있으므로 간단하게 오류를 방지할 수 있다.

import React from "react";
import "./App.css";

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

export default App;

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

import React from "react";
import "./App.css";

App(() => {
  const name = "undefined";
  return <div>{name}</div>;
});

export default App;

name 값이 undefined일 때 보여 주고 싶은 문구가 있다면 다음과 같이 코드를 작성할 수 있다.

import React from "react";
import "./App.css";

App(() => {
  const name = "undefined";
  return <div>{name || "react"}</div>;
});

export default App;