[React] 코딩애플 blog-part3-6 (리액트에서 자주쓰는 if문 작성패턴 5개)

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 생략이 가능

 

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

=ternary operator

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

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 
그냥 JSX 내에서 if

삼항연산자는 중첩 사용 가능

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

 

 

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

자바스크립트에서는 &&연산자가 있다.

왼쪽 오른쪽 둘다 true이면 전체를 true로 바꿔주세요 라는 의미

true && false; //false
true && true; //true

근데 만약에 true, false가 아닌 자료형을 넣으면 신기한 결과가 나온다.

 

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

이걸 이용하면 !

만약에 이 변수가 참이면 <p></p>를 이 자리에 뱉고 참이 아니면 null 뱉고

 

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

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

위의 예제 두개는 동일한 역할로

왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남습니다.

왼쪽 조건식이 false면 false가 남습니다.

 

 

4. switch / case 조건문

if문이 중첩해서 여러개 달려있는 경우 (redux에서 reducer 만들 때)

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
  }

}

두 코드는 동일한 역할이다.

▲ switch 작성 법

1. switch (검사할변수명){}
2. 그 안에 case 검사할변수명이 이거랑 일치하냐 : 를 넣어줍니다. (if문)
3. 그래서 이게 일치하면 case : 밑에 있는 코드를 실행
4. default : 는 그냥 맨 마지막에 쓰는 else문과 동일

 

 

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

예를 들면 쇼핑몰에서 상품설명부분을 탭으로 만든다고할때,

 

현재 state가 info면 <p>상품정보</p>

현재 state가 shipping이면 <p>배송정보</p>

현재 state가 refund면 <p>환불약관</p>

 

이것을 if문이 아닌, 자바스크립트 오브젝트자료형에 내가 보여주고 싶은 HTML을 다 담는다.

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

    </div>
  )
}

object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 쓴다.

 

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

만약에 var 현재상태가 'info'면 info 항목에 저장된 <p>태그가

만약에 var 현재상태가 'refund'면 refund 항목에 저장된 <p>태그가

 

 

좀더 깔끔하게 쓰면

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

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