📍 Conditional statement

JSX를 이용하여 html을 작성 시 조건문을 사용하게 되는 경우가 많다. 따라서 coding apple 강좌를 통해 React에서 조건문을 사용하는 방법에는 어떤 것들이 있는지 알아보았다.

1. if / else

function Component() {
  if ( true ) {
    return <p>조건문이 참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
} 

컴포넌트 내에서 조건문을 사용하려면 이와 같이 사용해야 하며, 자바스크립트 if문은 return() 안, 즉 JSX 내에서는 사용 불가능하다.

즉, <div> if (condition) {statement} </div> 이런 표현이 금지된다.
그래서 보통 return + JSX 전체를 뱉는 if문을 사용한다.

2. 삼항연산자 (ternary operator)

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

삼항연산자는 조건문 ? 조건문이 참일때 실행할 코드 : 거짓일 때 실행할 코드 형식으로 사용한다.
JSX 내에서 if/else 대신 쓸 수 있다는게 장점이며 조건을 간단히 주고 싶을 때 사용한다.

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>1 === 1 조건이 참이면 보여줄 HTML</p>
        : ( 2 === 2 
            ? <p>1 === 1 조건이 거짓이면서 2 === 2 조건이 참이면 보여줄 HTML</p> 
            : <p>1 === 1 조건이 거짓이면서 2 === 2 조건이 거짓이면 보여줄 HTML</p> 
          )
      }
    </div>
  )
} 

또한 삼항연산자는 이와 같이 중첩 사용도 가능하나, 나중에 읽었을 때 또는 남이 읽었을 때 이해하기 힘든 코드는 좋지 않으므로 추천하지 않는다.

3. && 연산자

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

&& 연산자는 좌측 조건문이 true이면 우측 JSX가 그 자리에 남게 된다. 좌측 조건문이 false이면 false가 남기 때문에 HTML로 렌더링하지 않게 된다. 그렇기에 변수가 참이면 <p></p>를 사용하고, 참이 아니면 null을 사용하는 상황에서 자주 쓸 수 있는 간단한 조건문이다.

&& 연산자
좌우 조건문이 모두 true면 전체를 true로 바꿔주는 연산자이다.
이때 자바스크립트는 && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣게 되면

true && '안녕';
false && '안녕';
true && false && '안녕';

맨 윗 코드는 '안녕'이 남고 중간 코드는 false, 맨 아래 코드는 false가 남게 된다.

4. switch / case

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

if문을 이렇게 연달아 여러 개 써야되는 상황들이 있을 때 자바스크립트 switch 문법을 이용하면 괄호를 조금 더 줄일 수 있다.

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

이와 같이 switch 문법을 사용했을 때 장점은 if문을 연달아쓰는 대신 줄어든 코드로 사용할 수 있지만, 조건문에서 하나의 변수만 검사할 수 있다는 것이 단점이다.

switch 문법
1. switch (condition) {statement} 형식
2. {statement} 안에 case 조건판단 :을 넣어준다.
3. case 조건 판단 :이 참이면 바로 아래에 있는 코드를 실행한다.
4. default :는 맨 마지막에 쓰는 else문과 동일하다.

5. enum

예를 들어 쇼핑몰을 제작한다고 할 때, 경우에 따라서 상품정보, 배송정보, 환불약관 등의 내용을 보여줘야 할 것이다.

현재 state가 info면 <p>상품정보</p>
현재 state가 shipping이면 <p>배송정보</p>
현재 state가 refund면 <p>환불약관</p>

이런 것을 보여주고 싶을 때 일단 state를 만들어놓고 if문으로 state를 검사하는 문법을 써야할 것 같지만, 이번엔 if문이 아니라 자바스크립트 object 자료형에 내가 보여주고 싶은 HTML을 다 담는다.

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

    </div>
  )
} 

JSX 상에서 html 태그들은 저렇게 object에 담든, array에 담든 아무 상관이 없다. 이렇게 object 자료형으로 HTML을 다 정리해서 담은 다음 마지막에 object{} 뒤에 [] 대괄호를 붙여 key값이 current_state인 자료를 사용할 수 있다. 그럼 이제 current_state라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있다.
만약에 current_state가 'info'면 info 항목에 저장된 <p>상품정보</p>가 보여질 것이고, current_state가 'refund'면 refund 항목에 저장된 <p>환불약관</p>가 보여지는 것이다.

🪄 마치면서

JSX에서 사용하는 조건문도 다른 언어들과 비슷하게 기본적인 조건문이 많아서 편하게 공부했던 것 같다. 다만 주의할 점이 있다면 if/else의 경우 return() 안에서 사용할 수 없다는 점만 조심하면 될 것 같다.