리액트에서 자주 쓰는 if문 모음

### (ft.코딩애플 리액트 강의)

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

컴포넌트에서 JSX를 조건부로 보여주고 싶을때 이렇게 쓴다.

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

여기서 else를 생략할 수 있는데 아래와 같이 자바스크립트 function 내에서 return을 쓰면 return 밑에 있는 코드는 실행되지 않기 때문!

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

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

ternary operator : 조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드

삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용

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

사실 삼항 연산자는 중복으로도 사용이 가능하지만, 가독성이 좋지 않으니 그냥 분리해서 씁시다..

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

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

왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남고, 왼쪽 조건식이 false면 false가 남음. (false시 html로 랜더링하지 않음)

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

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

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>
  }
}

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 자료형 응용

탭에서 경우에 따라 다른 페이지를 보여주고 싶을때
예) 상품정보 / 배송정보 / 환불약관 내용

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

    </div>
  )
} 

object 자료형으로 HTML을 다 정리해서 담은 다음

마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 쓰면 현재상태 값을 출력한다.