리액트에서 자주 쓰는 if문 알기

현·2024년 1월 22일

React

목록 보기

25/30

🧙‍♂️ 들어가며

이번 포스팅에서는 리액트에서 자주 사용하는 if문 작성 패턴 5개를 정리해 보았다.

🔮 자주 쓰는 if문

컴포넌트 안에서 쓰는 if-else

function Component() {
  if ( true ) {
    return <p>true일 때의 HTML</p>;
  } else {
    return null;
  }
}

else 생략 가능

function Component() {
  if ( true ) {
    return <p>true일 때의 HTML</p>;
  } 
  return null;
}

else와 중괄호를 하나 없애도 위 코드와 같은 기능을 한다. JS function 안에서는 return이라는 키워드를 만나면 return 아래에 있는 코드는 더 이상 실행되지 않기 때문이다.

JSX 안에서 쓰는 삼항 연산자

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>true일 때의 HTML</p>
        : null
      }
    </div>
  )
}

기존 삼항 연산자와 동일하게 조건문 ? 조건문 true 시 실행할 코드 : false 시 실행할 코드 형식으로 작성하면 된다.

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

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>true일 때의 HTML</p>
        : null
      }
    </div>
  )
} 

function Component() {
  return (
    <div>
      { 1 === 1 && <p>true일 때의 HTML</p> }
    </div>
  )
}

위 코드 두 개는 동일한 역할을 한다. 왼쪽 조건식이 true이면 오른쪽 JSX가 그 자리에 남고, 왼쪽 조건식이 false면 false가 남는다.

JS는 &&로 연결된 값들 중 처음 등장하는 false 값을 찾아주고, 만약 그게 아니라면 마지막 값을 남겨 주기 때문!

switch-case 조건문

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

기존 switch문 문법과 동일하게 작성해 주면 된다. default :는 맨 마지막에 쓰는 else문과 동일하다고 생각하면 쉽다. if문을 연달아 쓸 때 코드가 짧아진다는 장점이 있지만, 조건식 란에서 변수 하나만 검사할 수 있다는 것이 단점이다. 😯

object/array 자료형 응용

만약 경우에 따라서 다른 html 태그들을 보여 주고 싶을 때는 어떻게 코드를 작성하면 좋을까? 이럴 때는 JS의 object/array 자료형을 사용하면 편리하다.

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

    </div>
  )
}

// 또는

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

function Component() {
  var state = 'info';
  return (
    <div>
      {
        tabUI[state]
      }
    </div>
  )
}