[React] 02. JSX

리액트는 HTML과 비슷한 형식의 코드 작성 방식인 JSX를 통해 코드를 작성합니다. 오늘은 JSX의 기능과 규칙들을 배워보도록 하겠습니다. 또한 코드의 가독성과 작성을 돕는 ESLint와 Prettier도 다뤄보도록 하겠습니다.

---

코드 이해하기

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 logo from './logo.svg';
import './App.css';

• import 구문은 특정 파일을 불러오는 것을 의미
• 모듈을 불러와서 사용하는 것은 사실 브라우저에 없는, Node.js에서 지원하는 기능

---

📚 번들러(Bundler)

• 브라우저에서도 이러한 기능을 사용하기 위해 번들러(bundler)를 사용
• 번들(bundle)은 파일을 묶어서 연결한다는 것
• 웹팩, Parcel, browserify 등의 도구들이 있지만, 리액트 프로젝트에서는 주로 웹팩을 다룸
• 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 모듈을 모두 합쳐 하나의 파일로 만들어 줌
• 최적화 과정에서 여러 개의 파일로 분리할 수도 있음

---

📚 로더(Loader)

• 웹팩을 이용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있음
• 파일들을 불러오는 것이 로더(loader)
• CSS 파일을 불러오는 css-loader, 웹 폰트나 미디어 파일을 불러오는 file-loader 등이 있음
• 리액트 프로젝트를 만들 때 사용했던 create-react-app이 웹팩의 로더를 자동으로 설치

---

📚 함수 컴포넌트

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

• 이 코드는 function 키워드를 사용하여 App이라는 컴포넌트를 만듦
• 이러한 컴포넌트를 함수 컴포넌트라고 함
• 프로젝트에서 컴포넌트를 렌더링하면 함수에서 반환하고 있는 내용을 보임

---

📌 JSX란?

위에 작성된 코드는 HTML 문법과 비슷해 보입니다. 이러한 코드는 자바스크립트의 확장 문법인 JSX입니다. 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

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를 사용하게 된 것입니다.

---

📌 JSX의 장점

📚 보기 쉽고 익숙하다

HTML 코드를 작성하는 것과 비슷하여 일일이 요소들을 만들 지 않아도 됩니다.

---

📚 더욱 높은 활용도

div나 span과 같은 HTML 태그를 사용하고 앞으로 사용할 컴포넌트도 JSX 안에서 사용할 수 있습니다.

---

📌 JSX 문법

📚 감싸인 요소

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야합니다. Virtual DOM에서 컴포넌트 변화를 효과적으로 감지하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 합니다.

function App() {
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동되니?</h2>
    </div>
  );
}

<div> 태그 외에도, 리액트 v16 이상부터 도입된 Fragment <Fragment> 태그나, Fragment의 다른 형태인 <></>으로 감쌀 수 있습니다.

---

📚 자바스크립트 표현

JSX는 자바스크립트 표현식을 사용할 수 있습니다. JSX 내부에서 코드를 { }로 감싸면 됩니다.

function App() {
  const name = "리액트";
  return (
    <div>
      <h1>리액트 안녕!</h1>
      <h2>잘 작동되니?</h2>
    </div>
  );
}

자바스크립트 ES6의 변수 설정과 관련된 내용은 다음의 링크를 참고하세요

https://daradarav.tistory.com/1?category=1047657 

[JavaScript] 01. INTRODUCTION 소개

---

📚 if문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식에서 if 문을 사용할 수 없습니다. JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나

{ } 안에 조건부 연산자를 사용할 수 있습니다. 삼항 연산자를 통해 표현할 수 있습니다.

function App() {
  const name = "리액트";
  return (
    <div>
      {
        name === "리액트" ? (
          <h1>리액트 작동 중</h1>
        ) : (
          <h2>리액트가 아님</h2>
        )
        }           
    </div>
  );
}

이렇게 코드를 작성하면 "리액트 작동 중"이라는 문구가 작성됩니다. const name의 값을 변경하면 "리액트가 아님"이라는 문구가 출력됩니다.

---

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

특정 조건을 만족할 때만 내용을 보여주고, 조건을 만족하지 않으면 아무것도 렌더링 하지 않아야 할 때가 있습니다. 이러한 상황은 조건부 연산자를 통해 구현할 수 있습니다.

function App() {
  const name = "리액트";
  return (
    <div>
      {name == "리액트" && <h1>리액트입니다.</h1>} 
    </div>
  );
}

앞선 코드는 && 연산자를 사용하여 조건부 렌더링을 할 수 있습니다. 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문에 이와 같은 코드로 작성할 수 있습니다. 단 falsy한 값인 0은 예외적으로 화면에 출력됩니다.

---

📚 undefined 는 렌더링하지 않기

리액트 컴포넌트에서는 함수에서는 null과 달리 undefined만 반환하여 렌더링하는 상황을 만들면 안 됩니다. OR( || )연산자를 사용해 undefined일 때의 값을 설정할 수 있습니다.

import './App.css';

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

export default App;

단 JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

---

📚 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어야 합니다. 스타일 이름 중에서 background-color 처럼 -가 있는 경우 -를 없애고 카멜 표기법(camelCase)으로 작성해야 합니다. 따라서 backgroundColor, fontSize, fontWeight 등과 같이 적혀야 합니다.

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

---

📚 class 대신 className

HTML에서 CSS 클래스를 사용할 때는 <div class="myClass"></div>와 같이 class라는 속성을 설정합니다. 그러나 JSX에서는 class가 아닌 className으로 설정해 주어야 합니다. 이전에는 class로 CSS 클래스를 설정하면 오류가 발생하였지만, 리액트 v16이상부터는 class를 className으로 변환해주고 경고를 띄웁니다.

---

📚 꼭 닫아야 하는 태그

HTML에서는 <input>과 같이 태그를 닫지 않은 채로 작성하는 경우가 있었습니다. 그러나 JSX에서 태그를 닫지 않으면 오류가 발생합니다.

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

 

태그 사이에 별도의 내용이 들어가지 않는 경우 <input />로 작성할 수 있습니다. 이러한 태그를 self-closing 태그라고 합니다. 태그 선언과 동시에 닫을 수 있는 태그입니다.

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

---

📚 주석

JSX 내부에서 주석을 작성할 때에는 {/*   */}와 같은 형식으로 여러 줄에 주석을 작성합니다. 시작 태그를 여러 줄로 작성할 때는 그 내부에서 //와 같은 형태의 주석도 작성할 수 있습니다.

---

📌 ESLint와 Prettier 적용하기

ESLint는 문법 검사 도구이고, Prettier는 코드 스타일 자동 정리 도구입니다. 두 도구 모두 VS Code 마켓 플레이스에서 설치할 수 있습니다.

📚 ESLint

ESLint는 코드 작성 시 발생된 실수에 대한 에러 및 경고 메시지를 에디터에서 바로 확인할 수 있도록 합니다. 초록색 줄이 그어진 코드는 무시해도 되지만, 빨간색 줄이 그어진 코드는 반드시 고쳐야 합니다. 에디터 하단에 뜨는  문제 탭은 VS Code 상단 메뉴에서 보기 > 문제를 클릭하여 열 수 있습니다.

---

📚 Prettier 

JSX는 코드의 가독성을 위해 들여 쓰기를 사용합니다. VS code에서 F1을 누르고 format이라고 입력한 다음 enter를 입력합니다. Prettier가 자동으로 코드를 정리해줄 것입니다. Prettier는 코드를 정렬해줄 뿐 아니라 세미콜론이 빠진 곳에는 추가되고 작은 따옴표를 큰 따옴표로 바꿔줍니다.