[리액트공부] 2. JSX

리액트 프로젝트를 처음 생성하고, src/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 같지만 이런 코드를 JSX 라고 부른다.

JSX란

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼다. 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

번들링(bundling) : 파일을 하나로 묶어서 연결하는 것

JSX의 장점 : 보기 쉽고 익숙하다.

일반 자바스크립트 코드에 비해서 JSX 코드는 HTML 코드를 작성하는 것과 비슷하므로, 가독성이 좋다고 할 수 있다.

JSX의 장점 : 활용도가 높다.

JSX에서는 우리가 알고 있는 div, span 같은 HTML 태그 뿐만 이니라 앞으로 만들 컴포넌트도 작성할 수 있다. src/index.js 파일을 열어 보면 다음과 같은 코드가 있다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이 App 컴포넌트를 마치 HTML 태그 쓰듯이 그냥 작성하는 모습을 볼 수 있다.

JSX 문법

하나로 감싼 요소

반드시 하나의 부모 요소로 감싸야 한다.

function App() {
    return (
        <h1>hello!</h1>
        <h2>React</h2>
    );
}

이런 식으로의 사용은 불가능하다.

function App() {
  return (
    <div>
      <h1>hello!</h1>
      <h2>React</h2>
    </div>
  );
}

위와 같이, 하나의 div 태그 안에 묶어서 최종적으로는 하나의 태그만 리턴되게끔 해야 한다.

Virtual DOM에서 컴포넌트의 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하기 위함이다.
만약 div 태그를 사용하고 싶지 않다면, 리액트 v16 이상에서 도입된 Fragment 라는 기능을 사용하면 된다. 그냥 <>, </>의 빈 태그로 묶어 주면 된다.

function App() {
  return (
    <>
      <h1>hello!</h1>
      <h2>React</h2>
    </>
  );
}

자바스크립트 표현

자바스크립트 표현식을 작성하려면 JSX 내부에서 중괄호 {} 를 사용한다.

function App() {
    const name = "seunggi";
  return (
    <>
      <h1>hello!</h1>
      <h2>{name}</h2>
    </>
  );
}

const와 let 변수
const : 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드
let : 동적인 값, 즉 변경할 수 있는 변수를 선언할 때 사용하는 키워드

삼항 연산자

JSX 내부에서는 if문을 사용할 수 없다. 따라서 특정 조건에 따라 다른 요소를 렌더링해야 할 때는 삼항 연산자 ? : 를 사용한다.

function App() {
    const name = 'react';
  return (
    <>
      <h1>hello!</h1>
      {name === 'React' ? <h2>yes</h2> : <h2>no</h2>}
    </>
  );
}

앞에 조건식을 써주고, 뒤에 ?를 붙여준 후에 : 앞에는 조건식이 참일 때, 뒤에는 조건식이 거짓일 때 수행할 동작을 작성하면 된다.

AND 연산자

조건에 따라 아예 아무것도 렌더링하지 않을 때도 있다.
삼항 연산자를 활용해서 조건 ? <실행> : null 처럼 구현해도 되지만, AND 연산자 (&&)를 이용해 보다 깔끔하게 구현이 가능하다.

function App() {
  const name = "react";
  return (
    <>
      <h1>hello!</h1>
      {name === "React" && <h2>yes</h2>}
    </>
  );
}

undefined를 렌더링하지 않기

함수에서 undefined만 반환하여 렌더링하는 일이 없도록 해야 한다.

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

그러나 JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

function App() {
  const name = undefined;
  return (
    <>
      <h1>{name}</h1>
    </>
  );
}

인라인 스타일링

style을 적용하고 싶을 때는 문자열 형태로 넣는 것이 아니라 객체를 따로 만들어 넣어야 한다.

function App() {
  const name = "React";
  const style = {
    backgroundColor: 'black',
    color: `aqua`,
  };
  return (
    <>
      <h1 style={style}>{name}</h1>
    </>
  );
}

CSS에서는 background-color 등과 같이 하이픈(-)이 포함되는 속성이 있는데, 카멜 표기법으로 backgroundColor 와 같이 작성해야 한다.

class → className

class 는 자바스크립트에서 예약어이기 때문에 CSS 클래스를 사용하기 위해서는 className으로 지정한다.

태그를 꼭 닫자

input 요소는 <input></input> 이라 입력하지 않고 <input> 이라고만 작성해도 동작하지만, JSX에서는 오류가 발생한다. 그래서 태그를 꼭 닫아 주어야 한다. 이 때 태그 사이에 별다른 내용이 필요없을 때에는 <input /> 등과 같이 self-closing 태그로 작성할 수도 있다.

주석

• 여러 줄 주석 : {/* ... */}
• 한 줄 주석 : //

function App() {
  // const hello = "memo";
  {
    /*
    this is memo.
    */
  }
  return (
    <>
      <h1>d</h1>
    </>
  );
}

설명 생략!