React에서 if문

주로 JSX 이용해서 html을 작성하고 있는데 if문을 써서 조건부로 html을 보여주고 싶을 때가 많다.

삼항연산자 대신에 if문을 쓰고 싶을 때 어떻게 사용해야할까

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

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

• 컴포넌트에서 JSX를 조건부로 보여주고 싶다면 그냥 이렇게 쓰면 된다.
• 우리가 자주 쓰던 자바스크립트 if문은 return() 안의 JSX 내에서는 사용 불가
  <div> if (어쩌구){저쩌구} </div> 이게 안된다는 말
• 따라서 보통 return + JSX 전체를 뱉는 if문을 작성해서 사용

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

• 참고하자면 else와 중괄호를 하나 없애도 위의 코드와 똑같은 기능을 한다.
• 왜냐하면 자바스크립트 function 안에서 return 이라는 키워드를 만나면 return 밑에 있는 코드는 더이상 실행되지 않기 때문
• if -> else if -> else 이렇게 구성된 조건문도 if 두개로 축약 가능

2. JSX 안에서만 쓰는 삼항연산자(ternary operator)

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

• 조건문 ? 조건문 참일 때 실행할 코드 : 거짓일 때 실행할 코드 형식
• JSX 내에서 if / else 대신 쓸 수 있다는게 장점
• 삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행 가능하며 조건을 간단히 주고 싶을 때 사용
• 삼항연산자는 중첩 사용도 가능

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

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

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

• html 조건부로 '만약에 이 변수가 참이면 <p></p>를 이 자리에 보여주고 아니면 null 보여주고' 라는 ui를 만들 때 매우 자주 사용
• 위의 두 예제는 동일한 역할을 한다.
• 밑의 예제에서는 && 연산자로 조건식과 오른쪽 JSX 자료를 비교하고 있다.
• 이때, 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남고 왼쪽 조건식이 false면 false가 남는다.
  (false가 남으면 html로 렌더링하지 않는다.)

4. switch / case 조건문

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

• if문이 중첩해서 여러 개 달려있는 경우에 사용
• if문 연달아 쓸 때 코드가 약간 줄어들 수 있음

1. switch(검사할 변수){} 부터 작성
2. 그 안에 case 검사할 변수가 이거랑 일치하냐 : 를 넣어준다.
3. 일치 하면 case : 밑에 있는 코드를 실행
4. default : 는 그냥 맨 마지막에 쓰는 else문과 동일

5. object / array 자료형 응용

• 경우에 따라서 다른 html 태그들을 보여주고 싶은 경우 사용
• 예를 들어 쇼핑몰에서 상품설명부분을 탭으로 만든다고 가정
  • 경우에 따라서 상품정보 / 배송정보 / 환불약관 내용을 보여주고싶을 때
  • 현재 state가 info면 <p>상품정보</p>
  • 현재 state가 shipping이면 <p배송정보</p>
  • 현재 state가 refund면 <p>환불약관</p> 이런걸 보여줄 때

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

    </div>
  )
}

• 원래 JSX 상에서 html 태그들은 이렇게 object에 담든, array에 담든 아무 상관 없음
• 마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key 값이 현재상태인 자료를 뽑겠다" 라고 써놓기
• 그럼 이제 현재상태라는 변수의 값에 따라서 원하는 html을 보여줄 수 있음
• 만약 var 현재 상태가 'info'면 info 항목에 저장된 <p> 태그가 보여질 것

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

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

• 이런 식으로 변수에 저장해서 써도 괜찮다.
  하지만 React처럼 html css js를 마구 개발하면 코드가 지저분 할 수도 있음