[React] JSX문법

업데이트: December 7, 2021

태그: React

카테고리: React

기본적인 코드 이해

src/App.js

import logo from "./logo.svg";
import "./App.css";
import react from "react";

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;

CRA프로젝트로 생성하면 package.json의 dependencies에 따라 node_modules에 재귀적으로 모듈이 설치된다.
이 중, react 등의 모듈을 import 구문으로 가져와서 사용한다.

브라우저에서 패키지를 불러올 수 있도록 번들러를 사용한다. 번들러 도구를 이용하면 import로 모듈을 불러왔을때, 불러온 모듈을 합쳐 하나의 파일을 생성해준다.

이렇게 하나의 파일을 생성해야하는 이유는 사용자가 사이트에 접속하면 서버에 웹 페이지를 요청한다.
이때 보내야하는 파일이 여러개라면 여러번의 통신을 해야하는 비효율성이 생기는데, bundler를 사용하면 1개의 js파일로 모아주기 때문에 통신횟수가 현저히 줄어든다.

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

다운로드 (1)

CRA에서 index.js를 시작으로, 이어져있는 모든 모듈을 합쳐 웹팩을 통해 bundling을 수행한다. 웹팩을 사용하면 svg, css파일 등등 여러 파일을 불러올 수 있고, babel도 사용 가능해 ES6문법으로 작성된 자바스크립트 파일을 ES5 문법으로 변환하면서 번들링을 수행한다.

JSX란

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>
  );
}

함수의 리턴 값에 보이는 html 태그들이 jsx문법으로 작성된 코드들이다.

jsx는 자바스크립트의 확장 문법이고, 위에서 언급한 웹팩에서 번들링하는 과정에서 babel에 의해 일반 자바스크립트 코드로 변환된다.

const App () => {
    return (
        <div>
            hello <b>react</b>
        </div>
    )
}

이런식으로 작성된 JSX코드는

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

이런 식으로 변환된다.

JSX코드를 통해 개발자는 Html태그를 보면서 직접적으로 개발이 가능하다.

JSX 문법

return시 감싸야한다.

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

import React from 'react';
function App() {
    return (
        <h1>hi</h1>
        <h2>react</h2>
    )
}

이렇게 여러 요소를 렌더링하면 안되고,

import React from "react";
function App() {
  return (
    <div>
      <h1>hi</h1>
      <h2>react</h2>
    </div>
  );
}
export default App;

이렇게 부모요소 하나를 감싸주어야한다.

앞서 리액트가 Virtual DOM을 만들어 비교할때, 트리형태로 DOM 트리가 만들어지기 때문에,
효율적인 비교를 위해 하나의 컴포넌트가 리턴하는 트리는 하나여야한다는 규칙이 있다.

이렇게 div태그로 감싸기 싫으면 Fragment를 import해 사용할 수 있다.

import React from "react";
import { Fragment } from "react";

function App() {
  return (
    <Fragment>
      <h1>hi</h1>
      <h2>react</h2>
    </Fragment>
  );
}
export default App;

혹은 태그없이 감싸주어도된다.

import React from "react";
const App = () => {
  return (
    <>
      <h1>hi</h1>
      <h2>react</h2>
    </>
  );
};

export default App;

JS표현

JSX내부에서 자바스크립트 표현식을 사용하기 위해서는 중괄호 {}로 감싸야한다.

const, let

const와 let은 ES6문법에서 새로 도입된 변수선언문이다.
기존 var는 scope단위였는데, scope란 변수에 접근할 수 있는 범위이다.
js에서 scope는 전역, 지역 scope인데, var는 더이상 js에서 사용되지 않는다.

반면 const와 let은 블록단위이기때문에, 블록 바깥의 변수에 영향을 주지 못한다.
블록단위란 {}중괄호로 경계가 나뉘는 구문을 묶는 단위이다.

블록단위 변수는 함수 밖에서 선언하면 전역 접근이 가능한데, 블록 내부에서 선언하면 해당 블록 내부와, 하위블록에서만 접근이 가능하다.

기존 var는 재선언하면 변수가 아예 바뀌었는데, let이나 const는 같은 블록 내부에서 재선언이 불가능하고,
const는 한 번 선언하면 다시 재선언이 불가능하다.

조건부연산자

if문 대신 삼항연산자를 사용한다.

{연산식 ? (연산식이 true일때 리턴할 코드) : (연산식이 false일때 리턴할 코드)}

if~ else문보다 훨씬 간단해진다.

AND연산자

{연산식 && (연산식이 true일때 리턴할 코드)}

주의할 점으로는 숫자 0은 그 자체로 false의 의미를 지니므로

const number = 0;
return number && <div>hi</div>;

위 코드는 화면에 0이 나타난다.

undefined

리액트는 undefined 자체를 렌더링할 수 없다. 특정 변수를 렌더링하는데, 해당 변수가 undefined일 수 있다면 OR(||)연산자로 undefined가 렌더링되는 경우를 방지하자.

DOM요소에 CSS스타일링

리액트의 DOM요소에 css를 적용하고 싶다면 객체형태로 넣어주어야하고, 스타일 이름은 카멜표기법을 적용해야한다.

function App() {
  const name = "리액트";
  const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
    padding: "16px",
  };
  return <div style={style}>{name}</div>;
}
export default App;

DOM요소에 className

JSX에서 태그에 클래스를 부여하기 위해서는 class=’클래스 이름’ 이 아닌,
className = '클래스이름'으로 적용해야한다.

홀태그

JSX에서는 태그를 열면 반드시 닫아야하지만, 홀태그가 가능한 태그들은 홀태그를 사용할 수 있다.
컴포넌트도 열거나 닫을 수 있지만, 홀태그로도 사용이 가능하다.

주석

return 에서 JSX문법이 사용된다고 했는데, 여기서 주석을 달기위해서는
{/* 주석내용 */}
이렇게 주석을 달아주어야한다.

엘비