[React] 리액트 조건문 사용하기

컴포넌트에서 출력을 동적으로 조작하려면 조건부 로직을 추가해야 합니다. 이번 글에서는 리액트에서 조건부 로직을 어떻게 사용하는지 알아보겠습니다.

먼저, 간단한 예시로 주사위 게임을 만들어보겠습니다. 주사위를 굴린 결과 두 개가 같으면 "You Win!"을, 다르면 "You Lose"를 출력하는 컴포넌트를 만들어봅시다.

// DoubleDice.jsx

import React from 'react';

const DoubleDice = () => {
  const num1 = Math.floor(Math.random() * 3) + 1;
  const num2 = Math.floor(Math.random() * 3) + 1;

  return (
    <div>
      {/* 조건부 렌더링 */}
      {num1 === num2 ? <h2>You Win!</h2> : <h2>You Lose :(</h2>}
      <p>Num1: {num1}</p>
      <p>Num2: {num2}</p>
    </div>
  );
};

export default DoubleDice;

이 컴포넌트에서는 num1과 num2라는 두 숫자를 생성하고, 이 숫자들이 같은지를 확인하여 조건부로 "You Win!" 또는 "You Lose"를 출력하고 있습니다.

다양한 방법으로 조건부 로직을 추가할 수 있습니다. 위 예시에서는 삼항 연산자를 사용했지만, 이외에도 다양한 방법이 있습니다.

export default function DoubleDice(){
    const num1 = Math.floor(Math.random() * 3) + 1;
    const num2 = Math.floor(Math.random() * 3) + 1;
    // 다른 방법으로의 조건부 렌더링
    const result = num1 === num2 ? 'You Win!' : 'You Lose :(';
    
    if(num1 === num2){
        return (
            <div>
                <h2>{result}</h2>
                <p>Num1 :{num1}</p>
                <p>Num2 :{num2}</p>
            </div>
        )
    }
    return (
        <div>
            <h2>You Lose :(</h2>
            <p>Num1 :{num1}</p>
            <p>Num2 :{num2}</p>
        </div>
    )
}

또한, 조건부로 렌더링할 부분이 하나뿐이라면 다음과 같이 더 간단하게 작성할 수 있습니다.

// DoubleDice.jsx

import React from 'react';

const DoubleDice = () => {
  const num1 = Math.floor(Math.random() * 3) + 1;
  const num2 = Math.floor(Math.random() * 3) + 1;

  return (
    <div>
      {/* 더 간단한 조건부 렌더링 */}
      {num1 === num2 && <h2>You Win!</h2>}
      <p>Num1: {num1}</p>
      <p>Num2: {num2}</p>
    </div>
  );
};

export default DoubleDice;

 

이외에도 다양한 방법들이 있습니다.

export default function DoubleDice(){
    const num1 = Math.floor(Math.random() * 3) + 1;
    const num2 = Math.floor(Math.random() * 3) + 1;
    return (
        <div>
            <h2>DoubleDice</h2>
            <h3>{num1 === num2 ? <h3>You win!</h3 >: null }</h3>
            <p>Num1 :{num1}</p>
            <p>Num2 :{num2}</p>
        </div>
    )
}

이러한 방법들을 응용하면 다양한 상황에서 조건부 로직을 쉽게 추가할 수 있습니다. 리액트에서는 이를 활용하여 동적이고 유연한 컴포넌트를 만들 수 있습니다.