JSX (3)

- 개요

JSX 코드에서 조건문과 반복문을 사용하는 방법을 알아본다

 

1) 조건문

1 - 1) 삼항 연산자

import ReactDOM from "react-dom";

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

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

 

삼항연산자는 "조건 ? 참값 : 거짓값"의 구조로 이루어져 조건문을 한줄에 작성하여 가독성을 높일 수 있다

이때 JS에서는 값이 동등한지 비교할 때, "===" 연산자를 사용한다

 

 

코드의 실행 결과는 위와 같다

 

1 - 2) AND 연산자

import ReactDOM from "react-dom";

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

const element = (
  <div>
    <h1>AND 연산자</h1>
    <ul>
      <li>{1 + 1 === 2 && "AND 연산자1"}</li>
      <li>{arr.length && "AND 연산자2"}</li>
    </ul>
   </div>
);

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

 

AND 연산자는 두개의 조건이 모두 참인 경우에만 참을 반환하고, 하나라도 거짓이 있다면 거짓을 반환한다

JS에서는 AND 연산자를 사용하기 위해 "&&" 연산자를 사용한다

 

 

실행 결과는 위와 같다

문자열 데이터 앞의 조건 모두 참이므로 위와 같이 표현되었다

 

1 - 3) OR 연산자

import ReactDOM from "react-dom";

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

const element = (
  <div>
    <h1>OR 연산자</h1>
    <ul>
      <li>{1 + 1 !== 2 || "OR 연산자1"}</li>
      <li>{text || "OR 연산자2"}</li>
    </ul>
   </div>
);

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

 

OR 연산자는 두개의 조건 중에서 하나라도 참이 있다면 참을 반환한다

JS에서는 OR 연산자를 사용하기 위해 "||" 연산자를 사용한다

 

 

실행 결과는 위와 같다

두개의 조건 중에서 하나라도 참이므로 위와 같이 화면에 표현되었다

 

1 - 4) IF문

import ReactDOM from "react-dom";

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

const element = (
  <div>
    <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문을 사용하는 것은 불가능하다

JSX에서 포함할 수 있는 것은 JS의 표현식이지, if문과 같은 실행문이 아니기 때문이다

그럼에도 if문을 사용하기 위해서는 여러 방법이 존재하는데,

예제에서는 위와 같이 if문을 즉시 실행 함수로 감싸서 JSX 내부에서 사용한다

 

 

실행 결과는 위와 같다

if문을 감싼 즉시 실행 함수를 사용하여 화면에 표현하였다

 

2) 반복문

import ReactDOM from "react-dom";

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

const arr2 = [];
for (let i = 0; i < arr.length; i++) {
  arr2.push(<h4 key={i}>{arr[i]}</h4>);
}

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

    <hr />

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

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

 

예제의 소스코드는 위와 같다

JS 배열인 arr를 순회하면서 중괄호로 감싸 JSX 객체로 변환하여 arr2 배열에 저장한다

이후 JS의 내장 함수인 map 함수를 호출하여 기존의 배열을 순회하여 새로운 배열을 즉시 생성한다

이때 React에서 리스트를 렌더링하기 위해 필요한 고유 key 값을 인덱스를 통해 지정한다

 

 

실행 결과는 위와 같다

선을 기준으로 다음과 같이 분류할 수 있다

• 1번 출력결과 : JS의 배열 데이터를 출력
• 2번 출력결과 : JSX 객체가 저장된 배열 데이터를 출력
• 3번 출력결과 : map 함수를 사용하여 생성한 배열 데이터를 출력