[React JS] 리액트를 다루는 기술 - JSX

 

1. 코드 이해하기

처음 리액트 앱을 생성하면 여러 파일들이 생성된 것을 볼 수 있다.

우선 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;

 

<< import >>

먼저 이 코드의 가장 상단을 보면 import 구문을 사용한 것을 볼 수 있다.

import는 특정 파일을 불러오라는 의미이며, 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import를 사용해 다른 파일을 불러와 사용할 수 있다.

 

이렇게 모듈을 불러와 사용하는 것은 원래 브라우저에는 없는 기능이지만, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다.

-> Node.js에서는 require를 사용해 패키지를 불러올 수 있다.

 

이런 기능을 브라우저에서 사용하기 위해 파일을 묶듯이 연결하는 번들러를 사용한다.

번들러를 사용하면 import를 이용해 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐 하나의 파일을 생성하거나 최적화 과정에서 여러개 파일로 분리한다.

리액트 프로젝트에서는 주로 웹팩을 사용한다.

 

리액트는 웹팩을 사용하여 svg, css 등 여러 파일을 불러와 사용할 수 있고, 웹팩의 로더라는 기능이 파일들을 불러온다.

 

▶ 로더의 종류

• css-loader: CSS 파일을 불러온다.
• file-loader: 웹 폰트나 미디어 파일을 불러온다.
• babel-loader: 자바스크립트 파일을 불러와 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용해 ES5 문법으로 변환해준다.

▷ 최신 자바스크립트 문법으로 작성된 코드를 ES5 문법으로 변환하는 이유

 

: 최신 자바스크립트 문법을 구버전 웹 브라우저와 호환하기 위해서

+) JSX 문법도 정식 자바스크립트 문법이 아니어서 ES5 문법으로 변환해야 한다.

 

※ create-react-app을 이용해 리액트 프로젝트를 생성하면 웹팩의 로더를 직접 설치하고 설정하지 않아도 된다.

 

 

<< App 컴포넌트 >>

function 키워드를 이용해 컴포넌트를 만들 수 있으며 이를 함수 컴포넌트라 한다.

컴포넌트를 렌더링하며 함수에서 반환(return)하고 있는 내용이 나타나고, 이때 return 안에 있는 반환하는 내용이 작성된 코드를 JSX 라고 부른다.

 

 

2. JSX

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

JSX로 작성된 코드는 브라우저에서 실행되기 전 코드가 번들링되는 과정에서 바벨이 사용되어 일반 자바스크립트 형태의 코드로 변환된다.

function App(){
	return(
    	<div>
        	Hello <b>react</b>
        </div>
    );
}

JSX로 작성된 코드

 

function App(){
	return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

변환된 코드

 

 

3. JSX 장점

• 보기 쉽고 익숙하다
• 활용도가 높다

 

4. JSX 문법

JSX에는 올바르게 사용하기 위해 지켜야할 규칙들이 있다.

 

< 감싸인 요소 >

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

즉 리액트 컴포넌트에서 요소가 여러 개 있으면 아래 예시처럼 div와 같은 하나의 요소로 감싸 주어야 한다.

 

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

function App() {
  return (
    <div>
      <h1>Hi React!</h1>
      <h2>잘 작동되는가?</h2>
    </div>
  );
}

export default App;

 

+) React  v16이상부터는 Fragment 기능으로 사용 가능

import { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h1>Hi React!</h1>
      <h2>잘 작동되는가?</h2>
    </Fragment>
  );
}

export default App;

function App() {
  return (
    <>
      <h1>Hi React!</h1>
      <h2>잘 작동되는가?</h2>
    </>
  );
}

export default App;

 

 

< 자바스크립트 표현 >

JSX 안에서 자바스크립트 표현식을 사용할 수 있다.

JSX 코드 내에서 중괄호 { }를 사용해 자바스크립트 표현식을 작성할 수 있다.

function App() {
  const name = "react";
  return (
    <>
      <h1>Hi {name}!</h1>
      <h2>잘 작동되는가?</h2>
    </>
  );
}

export default App;

 

 

< If 문 대신 조건부 연산자 >

JSX 내부 자바스크립트 표현식에서 if문을 사용할 수 없다.

=> { }안에서 조건부 연산자 사용해 해결

=> 조건에 따라 다른 내용을 렌더링해야 한다면 JSX 밖에서 if문 사용해 사전에 값 설정

 

function App() {
  const name = "react";
  return (
    <div>
      {name === "react" ? <h1>It's react</h1> : <h2>It's not react</h2>}
    </div>
  );
}

export default App;

 

 

< AND 연산자를 사용한 조건부 렌더링 >

AND 연산자(&&)를 사용해 조건부 렌더링을 할 수 있다.

이는 특정 조건을 만족할 때 내용을 보여주고, 만족하지 않으면 null을 사용해 아무것도 렌더링을 하지 않으려는 상황에서 유용하게 쓰일 수 있다.

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

export default App;

※ 리액트에서 false를 렌더링할 때는 null과 같이 아무것도 나타나지 않는다. 하지만 falsy한 값이 0이면 예외적으로 화면에 나타난다.

 

 

< undefined를 렌더링하지 않기 >

리액트 컴포넌트 함수에서 undefined만 반환하도록 렌더링되면 안된다.

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

export default App;

위와 같은 코드는 undefined를 반환하므로 오류가 발생한다.

 

=> OR( || ) 연산자를 사용해 해당 값이 undefined 인지 검사하여 오류를 방지할 수 있다.

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

export default App;

 

=> JSX 내부에서 undefined를 렌더링하는 것은 가능하다.

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

export default App;

 

 

 

< 인라인 스타일링 >

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

스타일 이름에 " - "가 들어가는 것들은 " - "를 제외하고 카멜 표기법(backgroundColor)으로 작성해야 한다.

function App() {
  const name = "react";
  return (
    <div
      style={{
        backgroundColor: "black",
        color: "aqua",
        fontSize: "2.5rem",
        fontWeight: "800",
        padding: 16,
      }}
    >
      {name}
    </div>
  );
}

export default App;

 

 

< class 대신 className >

HTML에서 CSS 클래스를 사용할 때는 class를 이용해 <div class = "class"></div>와 같이 사용했다.

하지만 JSX에서는 class가 아닌 className을 사용해야 한다.

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

export default App;

 

 

< 꼭 닫아야 하는 태그 >

일반 HTML에서는 <input>과 같은 태그들은 열기만 하고 닫지 않아도 작동하였다.

하지만 JSX에서는 태그를 닫지 않으면 오류가 발생한다.

따라서 JSX에서는 <input><br>등 태그를 열었으면 닫는 코드도 작성해줘야 한다.

 

이때, 태그 사이에 별도의 내용이 들어가지 않으면 태그를 선언하면서 동시에 닫을 수 있는 self-closing 태그를 사용할 수 있다.

 

<input />

 

위와 같이 사용하는 태그들을 self-closing 태그라 한다.

 

 

< 주석 >

JSX 내부에서 주성을 작성할 때는 {/* ... */}와 같은 형식으로 작성한다.

시작 태그를 여러 줄로 작성할 때는 // 를 사용하여 주석을 작성할 수 있다.