[React] - JSX (Javascript Syntax eXtension)

JSX 개념

NOTE!
JSX는 Javascript를 확장한 문법이다.

JSX는 HTML처럼 보이지만 JavaScript 값이다. 따라서 내부적으로 JavaScript를 사용할 수 있다.

const element = <h1>Hello, World!</h1>

`React`는 기본적으로 JSX를 이용하여 화면을 렌더링한다.

JSX의 특징 

JSX는 HTML이 아니기에 JSX에서 사용되는 태그의 속성 이름은 HTML과는 약간 다르다.

• `class` → `className`
• `for` → `htmlFor`
• `onclick` → `onClick`

그리고 다음과 같이 반드시 태그를 명시적으로 닫아줘야 하고, 하나의 부모 태그로 감싸져 있어야 한다.

function App() {
  return (
    <div>
      <button>Hello, World!</button>
      <input type="text" />
    </div>
  );
}

---

JSX에서 JavaScript 사용 방법

JSX에서 변수 사용하기

JSX 내에서 중괄호 안에 변수를 넣으면 JSX는 값을 출력 가능한 상태로 변환하여 화면에 그린다. 이때, 따옴표를 치면 단순 문자열로 인식하기에 중괄호 밖에는 따옴표를 치지 않는다.

import ReactDOM from 'react-dom';

let text = 'Hello, world!';
const num = 15;
const obj = { key: 0, a: 1, b: 2 };
const arr = ['a', 'b', 'c'];
const imageUrl =
  'https://dst6jalxvbuf5.cloudfront.net/static/img/logo/logo.svg';

const element = (
  <div>
    <h1>변수 넣기</h1>
    <ul>
      <li>{text}</li>
      <li>{text + 'test'}</li>
    </ul>
    <h1>숫자 및 계산식 넣기</h1>
    <ul>
      <li>{num}</li>
      <li>{num + 15}</li>
    </ul>
    <h1>Boolean, Nullish 값 넣기</h1>
    <ul>
      <li>{true}</li>
      <li>{false}</li>
      <li>{undefined}</li>
      <li>{null}</li>
    </ul>
    <h1>Object, Array 넣기</h1>
    <ul>
      {/* <li>{obj}</li> */}
      <li>{arr}</li>
    </ul>
    <h1>주석 넣기</h1>
    <ul>
      <li>{/* 주석입니다. */}</li>
    </ul>
    <h1>태그 속성에 넣기</h1>
    <ul>
      <li>
        <img src={imageUrl} alt="logo" />
      </li>
    </ul>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX에서 조건문 사용하기

당연히 JSX에서도 삼항연산자, AND 연산자, OR 연산자도 사용 가능하다. 삼항연산자, AND 연산자, OR 연산자는 React에서 조건부 렌더링을 위하여 아주 빈번히 사용한다.

import ReactDOM from 'react-dom';

const arr = [1, 2, 3];
const text = '';

const element = (
  <div>
    <h1>삼항연산자</h1>
    <ul>
      <li>
        {1 + 1 === 2
          ? '참입니다.'
          : '거짓입니다.'}
      </li>
    </ul>

    <h1>AND 연산자</h1>
    <ul>
      <li>{1 + 1 === 2 && 'AND 연산자1'}</li>
      <li>{arr.length && 'AND 연산자2'}</li>
    </ul>

    <h1>OR 연산자</h1>
    <ul>
      <li>{1 + 1 !== 2 || 'OR 연산자1'}</li>
      <li>{text || 'OR 연산자2'}</li>
    </ul>

    <h1>IF문 (즉시실행함수)</h1>
    <ul>
      <li>
        {(() => {
          if (1 + 1 === 2) return 'IF';
          else return 'ELSE';
        })()}
      </li>
      <li>
        {(() => {
          const data = '즉시실행함수';

          /* 어떤 연산이든 추가 가능 */
          /* 일반적으로는 이렇게 즉시실행함수가
         미리 위에서 가공하여 전달 */

          return data;
        })()}
      </li>
    </ul>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 사실 JSX에는 if문이 존재하지 않기 때문에 굳이 if문을 구현하려면 JSX에서 익명 함수를 선언하고, 선언된 즉시 실행하며 리턴값을 출력하도록 한다.(즉시실행함수), 그러나...

CAUTION!
즉시실행함수를 JSX 안에 작성하면 코드 가독성이 떨어지고 지저분해져서 잘 사용하지 않는 것이 좋다

JSX에서 반복문 사용하기

 JSX에서는 `for문`을 사용하기보다 주로 `map()` 메서드를 사용하여 반복문을 구현한다. JSX에서 반복문을 사용할 경우. 각 리스트의 속성들을 유니크한 키 값을 가져야 한다. 이때, "유니크한 키값"이란 React가 요소들이 나열되었을 때 각각의 아이템들을 React 내부적으로 구분하기 위해 사용하는 ID이다.

 

 키값에 배열의 인덱스를 두는 경우, 문제가 생길 수 있다. React에서도 인덱스를 키 값으로 두는 것을 권장하지 않는다. 다만, 리스트의 순서가 변경되지 않는다는 보장이 확실하다면 편의상 배열의 인덱스를 키 값으로 두는 것도 괜찮다.

import ReactDOM from 'react-dom';

const arr = ['1번', '2번', '3번'];

const arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2.push(<h4>{arr[i]}</h4>);
  // = [<h4>1번</h4>, <h4>2번</h4>, <h4>3번</h4>]
}

const element = (
  <div>
    <h1>배열로 넣기</h1>
    <ul>
      <li>{arr}</li>
      <li>{arr2}</li>
    </ul>

    <hr />

    <h1>Array.map</h1>
    <ul>
      <li>
        {arr.map((item) => {
          return <h4>{item}</h4>;
        })}
      </li>
    </ul>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX 스타일링 적용하기

JSX에 스타일링을 적용하는 방법은 다양한데, JSX의 html 태그 내에 스타일을 직접 주는 방법이 있다. 그런데 JSX는 HTML이 아니기에 JSX에 스타일을 적용할 때는 오브젝트 형태로 넣는다. (key : value) 스타일 오브젝트를 변수로 만들어 스타일 재사용도 가능하다. JSX 내에서 스타일을 주는 경우, 반드시 camelCase로 사용해야 한다. (Ex: fontSize: 20px )

import './App.css';

function App() {
  return (
    <div className="App">
      <div className="container"> 
        <div style={{color:'red', borderRadius:'12px'}}>시뻘건 Red 태그</div>  
      </div>
    </div>
  );
}

 

그리고 그 외에도 CSS in JS 방식으로 className을 활용하여 스타일링을 하는 것도 가능하며, 여러 스타일 라이브러리(Styled-Components, TailwindCSS ...)를 적용하여 스타일링을 넣을 수 있다. JSX의 조건문들을 이용하여 스타일링을 하면 조건부 스타일링도 가능하다. 

---

JSX를 통한 React 브라우저 렌더링

 React의 브라우저 렌더링 방식은 다음과 같다. (Create-React-App 구조를 따른다.)

 

가장 먼저 React를 사용하기 전, 필요한 의존성들을 모두 설치한다. (react, react-dom, react-scripts)

• `react`: 리액트의 핵심 코드들이 담겨있는 라이브러리
• `react-dom`: 리액트 핵심 코드로 구현한 화면들을 DOM에 연결시킬 때 사용하는 라이브러리
• `react-scripts`: 리액트로 구현한 코드를 실행하거나 빌드 작업을 할 때 사용하는 스크립트를 모아둔 라이브러리

아래 코드는 React 프로젝트의 index.js 파일이다.

// index.js
import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

`import ReactDOM  from ‘react-dom` 코드를 통해 react-dom 라이브러리를 코드에서 사용할 수 있게 한다. (의존성 설치를 했기에 가능하다.)

`ReactDOM` 은 `render()` 메서드를 호출하는데, `render()` 메서드는 해당 메서드의 첫 번째 인자로 오는 JSX를 두 번째 인자로 오는 `document.getElementById('root')` 에 추가한다. 

즉, `element`JSX를 “root” ID를 가진 HTML 요소를 선택하고 거기에 추가하는 것이다.

TIP!
결국, JSX를 작성하고 그 JSX가 React DOM 렌더링에 의해 화면에 그려지는 것이 React를 통한 웹사이트 제작 방식이다.

---