React - 리액트에서 자주 쓰는 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문을 작성한다.
  
  

(참고) 이렇게 쓰려면 else 생략이 가능하다.

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

🖤 JSX 안에서 쓰는 삼항연산자

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

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

• JSX 내에서 if/else 대신 쓸 수 있다는게 장점이다.
• 삼항 연산자는 그냥 if 와는 다르게 JSX안에서도 실행이 가능하다.

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

📗 && 연산자
"왼쪽 오른쪽 둘 다 true 면 전체를 true 로 바꿔주세요~" 라고 쓰고싶을 때 사용한다.

true && false; -> false
true && true; -> true

• 자바스크립트는 &&기호로 비교할 때 true 와 false를 넣는게 아니라 자료형을 넣으면

true && '안녕'; -> 안녕
false && '안녕'; -> false
true && false && '안녕'; -> false

• 왜냐하면 자바스크립트는 &&로 연결된 값들 중에 처음 등장하는 falsy 값(거짓 같은 값)을 찾아주고 그게 아니면 마지막 값을 남겨주기 때문이다.

• html 조건부로 보여줄 때 "만약에 이 변수가 참이면 <p></p>를 이 자리에 뱉고 참이 아니면 null 뱉어라" 이런 경우가 많다.
• 이걸 && 연산자를 사용해 조금 더 쉽게 축약할 수 있다.

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

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

• 위의 예제 두 개는 동일한 역할을 한다.
• 아래의 예제를 보면 && 연산자로 조건식과 오른쪽 JSX 자료를 비교하고 있다.
  이 때 왼쪽 조건식이 true 면 오른쪽 JSX가 그 자리에 남고 왼쪽 조건식이 false 면 false가 남는다.
  
  

🖤 switch / case 조건문

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

• 위 코드처럼 if문이 중첩해서 여러 개 달려있는 경우 switch 문법을 이용하면 괄호를 조금 더 줄일 수 있다.

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

📗 switch 문법
1. switch (검사할변수) {} 작성 후
2. 그 안에 case 검사할 변수와 일치한지 확인할 변수 :를 넣어준다.
3. 그래서 이게 일치한다면 case : 밑에있는 코드를 실행해준다.
4. default :는 맨 마지막에 쓰는 else문과 동일하다.

🖤 object / array 자료형 응용

• ex) 쇼핑몰에서 상품 설명 부분을 탭으로 만든다고 할 때
  탭이란? 상품정보 / 배송정보 / 환불약관 내용 등을 보여주고 싶은 것이다.

(탭 예시)

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

• 자바스크립트 object 자료형에 내가 보여주고싶은 HTML을 다 담는다.

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

    </div>
  )
} 

• object 자료형으로 HTML을 다 정리해서 담은 다음
  마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key 값이 현재상태인 자료를 뽑겠습니다" 라고 써놓는다.

• 그럼 이제 현재상태라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있다.