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

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

JSX의 return() 안에서는 일반 if문을 쓸 수 없어서, return 전체를 if/else로 감쌉니다.

 

 

jsx

function Component() {
  if (true) {
    return <h4>참이면 보여줄 HTML</h4>
  } else {
    return null
  }
}

else는 생략 가능합니다 (return을 만나면 함수 실행이 멈추기 때문):

 

 

jsx

function Component() {
  if (true) {
    return <h4>참이면 보여줄 HTML</h4>
  }
  return null
}

---

2. JSX 안에서 쓰는 삼항연산자 (Ternary Operator)

JSX 내부에서 바로 조건부 렌더링이 가능합니다.

 

 

jsx

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

중첩도 가능하지만 가독성이 나빠지므로 비추천:

 

 

jsx

function Component() {
  return (
    <div>
      { 1 === 1 ? <h4>참이면 보여줄 HTML</h4> : ( 2 === 2 ? <h4>안녕</h4> : <h4>반갑</h4> ) }
    </div>
  )
}

---

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

조건 ? <JSX> : null 대신 &&로 더 간결하게 쓸 수 있습니다.

 

 

jsx

// 기존 방식
function Component() {
  return (
    <div>{ 1 === 1 ? <h4>참이면 보여줄 HTML</h4> : null }</div>
  )
}

// && 활용 방식 (동일한 기능)
function Component() {
  return (
    <div>{ 1 === 1 && <h4>참이면 보여줄 HTML</h4> }</div>
  )
}

• 왼쪽이 true → 오른쪽 JSX 렌더링
• 왼쪽이 false → false가 남아 렌더링 안 됨

---

4. switch / case 조건문

if/else가 여러 개 연달아 있을 때 코드를 줄일 수 있습니다.

 

 

jsx

// if/else 여러 개
function Component2() {
  var user = 'seller';
  if (user === 'seller') {
    return <h4>판매자 로그인</h4>
  } else if (user === 'customer') {
    return <h4>구매자 로그인</h4>
  } else {
    return <h4>그냥 로그인</h4>
  }
}

// switch/case로 변환
function Component2() {
  var user = 'seller';
  switch (user) {
    case 'seller' :
      return <h4>판매자 로그인</h4>
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default :
      return <h4>그냥 로그인</h4>
  }
}

단점: 조건식에서 변수 하나만 비교 가능

---

5. object/array 자료형 응용

보여줄 HTML들을 object에 미리 저장해두고, 변수로 꺼내 쓰는 방식입니다.

 

 

jsx

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      { { info: <p>상품정보</p>, shipping: <p>배송관련</p>, refund: <p>환불약관</p> }[현재상태] }
    </div>
  )
}

별도 변수에 저장하면 더 깔끔합니다:

 

 

jsx

var 탭UI = {
  info: <p>상품정보</p>,
  shipping: <p>배송관련</p>,
  refund: <p>환불약관</p>
}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>{ 탭UI[현재상태] }</div>
  )
}

현재상태가 'info'면 <p>상품정보</p>, 'refund'면 <p>환불약관</p>이 렌더링됩니다.