리액트에서 자주쓰는 if문 작성패턴 5개

1. 컴포넌트 안에서 쓰는 if/else

return () 안에서 js if문 사용 못함
그래서 보통 return + JSX 전체를 나타내는 if문을 작성해서 사용.

//대충 컴포넌트
function Component() {
  //트루면
  if ( true ) {
    //이걸 보여줘라
    return <p>참이면 보여줄 HTML</p>;
  } else { // 아니면 안보여줌
    return null;
  }
} 

return 키워드 만나면 그 다음 코드는 실행 안되니, else 지워도 될듯.

2. JSX안에서 쓰는 삼항연산자

return문 안에서 {}괄호를 열어 사용가능.
조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드
이 형식에 맞춰 쓰면 끝.
간단한 조건 걸때 사용.

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

3. && 연산자로 if 역할 대신하기

간단한 조건체크시에 유용.
앞의 조건이 true면 뒤의 html을 나타내라는 뜻.
아래 코드를 예시로 보자면, 1 === 1 가 true일때 그 옆의 html을 나타내라.
true니까 나타남.

{ 1 === 1 && <p>참이면 보여줄 HTML</p> }

삼항연산자를 대체할수있을듯.
근데 그냥 삼항연산자 쓸거같음.

4. switch / case 조건문

if문이 중첩해서 여러개 달려있는 경우에 가끔 씀.
조건식란에서 변수하나만 검사할 수 있다는게 단점.
아래는 예시 코드.
파라미터로 받은 props를 {}로 벗겨냄. day 변수 짜잔.
day변수의 값에 따라 message 변수가 다르게 나타남(출처 : copilot)..

function DayMessage({ day }) {
  let message;

  switch (day) {
    case 'mon':
      message = '월요일이야. 파이팅!';
      break;
    case 'tue':
      message = '화요일엔 집중력이 필요해!';
      break;
    case 'wed':
      message = '수요일이네, 벌써 반 왔어!';
      break;
    default:
      message = '주말이 기다려진다!';
  }

  return <p>{message}</p>;
}

5. object/array 자료형 응용

자바스크립트 object 자료형에 내가 보여주고 싶은 HTML을 다 담은뒤, 뒤에 [키값] 를 붙여 현재 변수에 따라 서로다른 html을 보여주기.
변수에 저장하여 써도 좋을듯.
아래는 예시 코드.
일단 처음 html 렌더링이 되면 useState에 있는 welcome값에 따라, messages 의 welcome에 해당하는 html이 나타남.
그리고 그 다음엔 사용자가 누르는 버튼에 따라 서로다른 html이 나타남(출처 : copilot).

import { useState } from 'react';

function MessageViewer() {
  const [type, setType] = useState('welcome');

  const messages = {
    welcome: (
      <div>
        <h2>👋 환영합니다!</h2>
        <p>사이트에 오신 걸 환영해요. 새로운 기능을 살펴보세요.</p>
      </div>
    ),
    goodbye: (
      <div>
        <h2>👋 안녕히 가세요!</h2>
        <p>다음에 또 만나요. 좋은 하루 보내세요!</p>
      </div>
    ),
    error: (
      <div style={{ color: 'red' }}>
        <h2>❌ 오류 발생</h2>
        <p>문제가 발생했습니다. 나중에 다시 시도해 주세요.</p>
      </div>
    ),
    loading: (
      <div>
        <h2>⏳ 로딩 중...</h2>
        <p>잠시만 기다려 주세요.</p>
      </div>
    ),
  };

  return (
    <div>
      <div style={{ marginBottom: '1rem' }}>
        <button onClick={() => setType('welcome')}>Welcome</button>
        <button onClick={() => setType('goodbye')}>Goodbye</button>
        <button onClick={() => setType('error')}>Error</button>
        <button onClick={() => setType('loading')}>Loading</button>
      </div>
      {messages[type] || <h2>⚠️ 알 수 없는 타입입니다.</h2>}
    </div>
  );
}