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

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

컴포넌트에서 조건부를 보여주고 싶으면 그냥 위처럼 작성합니다.
초반에 배운 바닐라js의 if문은 return()안의 JSX에서 사용 불가함.
<div>if(어쩌구){저쩌구}</div> <- 이런게 안된다는 뜻.
그래서 return+JSX 전체를 뱉는 if문을 작성
*위와 같은 상황에선 else도 없앤다.

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

조건문 ? 조건문 참일 때 실행 : 조건문 거짓일때 실행

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

JSX 내에서 if/else대신 쓸 수 있다는게 장점.
그냥 if와는 다르게 JSX안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용.

중첩사용도가능

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

위처럼 보기 힘든 코드는 좋지 않은코드임.
그냥 return문 바깥에서 if else 쓰고 그 결과를 변수로 저장해놓고 변수를 JSX에 쓰는게 낫다.

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

(참고 js 문법) &&연산자라는게 있다.

true && false; // false가 남음
true && true; // true가 남음
true && '안녕'; // '안녕'
false && '안녕'; // false

위의 문법을 react에서 exploit하면(이용v) if문을 조금 더 간략하게 쓸 수 있다.

앞으로 UI를 만들때
"만약 이 변수가 참이면 <p></p>를 이자리에 뱉고 거짓이면 null뱉어"
라는 표현 코드를 짤일이 90%이상일 것입니다.
이걸 조금더 축약할 수 있는 문법이 -> &&

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 
// 위와 아래의 컴포넌트는 동일한 역할을 한다.
function Component() {
  return (
    <div>
      {
        1 === 1 && <p>참이면 보여줄 HTML</p> // 조건이 참이면 보여달라 아니면 null
      }// 왼쪽 조건식이 true면 ㅇ른쪽 JSX가 그자리에 남고, false면 false가 남는다.( false가 남으면 HTML로 렌더링 하지 않는다)
    </div>
  )
}

4. switch / case 조건문

if문이 중첩해서 여러개 달려있는 경우에 가끔 씀.

function reducer(state, 액션){
  
  if (액션.type === '수량증가'){
    return 수량증가된state
  } else if (액션.type === '수량감소'){
    return 수량감소된state
  } else {
    return state
  }
}
위의 코드를
function reducer(state, 액션){
  
  switch (액션.type) {
    case '수량증가' :
      return 수량증가된state;
    case '수량감소' : 
      return 수량감소된state;
    default : 
      return state
  }
}

5. 오브젝트 자료형을 응용한 enum

*cf) enumerate: 열거하다,목록

이 페이지의 가장 핵심 케이스

"경우에 따라 다른 HTML 보여주고 싶은 경우"
if문 여러개나 삼항연산자를 여러개 작성해야한다.
하지만 밑의 코드를 보라👀

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

if문이 아니라 js의 오브젝트형에 내가 보여주고 싶은 HTML을 모두 담습니다.
마지막에 object{}뒤에 []대괄호를 붙여서
"key값이 현재상태인 자료를 뽑겠습니다." 라고 써놓는 형식이다.
현재상태가 'info','shipping','refund'에 따라서 HTML을 보여줄 것이다.

오브젝트를 변수로 저장해서 아래처럼 써도 무방하다.

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

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