[React] JSX

youngminss·2021년 8월 26일
1

React

목록 보기
2/7

개요

React 는 자바스크립트 라이브러리이나, 기본적으로 사용하는데 있어서 이 라이브러리만의 문법이 존재한다.

본론

JSX

자바스크립트 확장 문법이며 XML과 매우 비슷하게 생겼다.

JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링(Bundling) 되는 과정에서 바벨(Babel)을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

  • 간단한 React Functional Component
function App() {
  return (
    <div>
      Hello <b>React</b>
    </div>
  );
}
  • 변환 예시
function App() {
  return React.createElement('div', null, "Hello", React.createElement('b', null, 'React'));
}

간단한 예제여서 그렇지, 만약 복잡한 코드라고 가정했을 때, 만약 컴포넌트를 렌더링할 때마다 JSX 코드를 작성하는 것이 아닌, 위 예제처럼 매번 React.createElement 함수를 사용해야 한다면 ?

이런 번거로움을 해소시켜주는 것이 JSX 이고, 이를 통해 매우 편하게 UI를 렌더링할 수 있다.

JSX 문법

1. 감싸인 요소

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

import React from 'react'

function App() {
  return (
    // App 컴포넌트에 모든 요소를 감싸는 아무의미없지만, 필요한 <div> 태그
    <div>
      <h1>여러개 요소가 있을 때는</h1>
      <h2>가장 바깥쪽에 모든 요소를 감싸는 태그가 꼭 필요해요.</h2>
    </div>
  )
}

export default App

💡 이렇게 해야만 하는 이유

  • Virtual DOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
import React, { Fragment } from "react";

function App() {
  return (
    // 더욱 아무의미 없지만, 감싸는 용도의 Frgment 기능
    // <></> 와 같다.
    // React v16 이상부터 도입되었다.

    <Fragment>
      <h1>여러개 요소가 있을 때는</h1>
      <h2>가장 바깥쪽에 모든 요소를 감싸는 태그가 꼭 필요해요.</h2>
    </Fragment>
  );
}

export default App;

2. {}로 자바스크립트 표현

JSX에서 자바스크립트 표현식을 쓸 수 있다.
단, { },중괄호 로 표현식을 감싸야 한다.

import React, { Fragment } from "react";

function App() {
  const name = "Guroom";
  return (
    <>
      {/* 상단에 선언한 JS 변수를 JSX 안에서 사용하기 위해 {} 사용 */}
      <h1>안녕하세요. 제 이름은 {name} 입니다.</h1>
    </>
  );
}

export default App;

3. if문 대신 조건부연산자(삼항연산자)

JSX 내부의 JS 표현식에서 if 문 은 사용할 수 없다.
조건에 따라 렌더링이 필요하면 조건부연산자(삼항연산자)를 대신 사용한다.

import React, { Fragment } from "react";

function App() {
  const name = "Guroom";
  return (
    <>
      { name === "Guroom" ? <h1>안녕하세요. 제 이름은 {name} 입니다.</h1> : <h1>name 은 Guroom 이 아닙니다.</h1>}
    </>
  );
  // name 에 값이 "Guroom" 이면, 제대로 된 텍스트를, 아니면 잘못된 메시지를 렌더링
  // 위에 상황은 정상적인 텍스트를 렌더링 할 것임
}

export default App;

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

특정 조건을 만족할 때만 내용을 보여주고, 만족하지 않을 때는 아예 아무것도 렌더링하지 않아야 하는 상황이 올 수 있다.
이럴 때는 조건부연산자를 사용할 수도 있지만, 더욱 간결한 AND 연산자(&&) 를 사용한다.

import React, { Fragment } from "react";

function App() {
  const name = "Guroom";
  return (
    <>
      {name === "Guroom" && <h1>안녕하세요. 제 이름은 {name} 입니다.</h1>}
    </>);
  // left 표현식 && right 표현식
  // left 표현식이 falsy 하지만 않으면, 즉 [ null, undefined, false 등 ] (0은 제외) 
  // right 표현식 실행
}

export default App;

5. undefined 렌더링 X

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

import React from "react";

function Temp() {
  // 이렇게 사용하지 말 것 !
  const name = undefined;
  return name;
}

export default Temp;

이래서, React 에서 만약 해당 결과가 undefined 를 반환할 수 있을 것 같다 ? 하면 OR 연산자(||) 를 사용하면 해당 값이 undefined 일 때 사용할 값을 지정할 수 있으므로 오류를 방지할 수 있다.

import React from "react";

function Temp() {
  // OR 연산자(||)를 통한, undefined 방지법
  const name = undefined;
  return name || "값이 undefined 입니다.";
}

export default Temp;

6. inline 스타일링

리액트에서 DOM요소에 style 을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어줘야 한다.

  • 기존에 CSS에서 background-color 같이 - 표현은 생략하고, 대신 카멜케이스(camelCase) 로 표기한다.
import React from "react";

function Temp() {
  // JSX inline style 예시
  // 아래 처럼, 따로 변수도 정의해서 첨부할 수도 있고
  // 요소의 style 값에 직접 CSS 스타일링을 할 수도 있긴하다.
  const name = "Guroom";
  const containerStyle = {
    backgroundColor: "red",
    fontSize: "48px",
    padding: 16,
  };
  return (
    <>
      <div style={{ containerStyle }}>{name}</div>
    </>
  );
}

export default Temp;

7. class 대신 className

JSX에서는 class 가 아닌, className 으로 설정해야한다.

import React from "react";

function Temp() {
  const name = "Guroom";

  return (
    <>
      {/* 이렇게 JSX 에서는 더 이상 요소에 class 가 아닌, className 으로 클래스를 정의한다. */}
      <div className="container">{name}</div>
    </>
  );
}

export default Temp;

8. 꼭 닫아야하는 태그

JSX에서는 HTML 코드를 작성할 때, 태그를 닫지 않으면 오류가 발생한다.

  • 원래 HTML 작성시 닫는 태그를 사용하지 않기도 하는 input, br 태그 같은 것들도 전부 닫는 태그를 사용해야한다.
import React from "react";

function Temp() {
  const name = "Guroom";

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

export default Temp;

9. 주석

import React from "react";

function Temp() {
  return (
    <>
      {/* 주석은 이런식으로 */}

      /* 이런 주석은 JSX 에서 소용없음 => 그대로 Text 로 렌더링 된다.
      // 이런 주석도 마찬가지다.
    </>
  );
}

export default Temp;

결론

JSX 는 간단하게 생각해보자면 React 에서 JS를 사용하기 위한 문법체계라고 생각해도 좋을 것 같다.


개념

  • 책 [ 리액트를 다루는 기술 ] 을 기반으로 작성하였습니다.
profile
머쓱이를 좋아합니다 😃

0개의 댓글