리액트에서 자주쓰는 if문 작성패턴 5개

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

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
} 
//else {return null;} 이 부분은 return null;로 else생략가능

 

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

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

이렇게 사용하며, { 조건식 ? 참일 때 실행할 식 : 거짓일 대 실행할 식 }으로 코드를 짠다. 삼항연산자도 중복사용이 가능하지만 중복으로 사용하다보면 코드가 복잡해져서 잘 쓰지 않는다.

 

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

&&연산자는 처음 등장하는 falsy 값을 찾아내고, 그게 아니라면 마지막 값을 내뱉는다.

보통 if문을 사용할 때, "이 변수가 참이면 <p></p>을 내뱉고 거짓이면 null을 내뱉어 주세요"라는 논리를 사용하는데,

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

이렇게 사용해서, 왼쪽식이 참이면 오른쪽 JSX코드를 내뱉고, 왼쪽식이 false면 false를 내뱉어 HTML에서 false는 랜더링을 하지 않으므로 null이 되게끔 할 수 있다.

 

4. switch / case문

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

기존 if문을 이렇게 바꾸며, if문이 많아지면 코드가 간결해진다.

사용법은 switch (검사할변수) {} 을 써주고 {}안에 case 검사할변수랑 비교할대상 : 을 써주고 일치하면 return의 식을 반환한다. 마지막의 default은 if문의 else와 같은 역할을 한다.

 

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

경우에 따라서 다른 HTML을 보여주고 싶은 경우에 if문을 사용하지 말고, 다음과 같이 할 수 있다. 

예를 들면 쇼핑몰에서 상품설명부분을 탭으로 만든다고 하자.

그리고 경우에 따라서 상품정보 / 배송정보 / 환불약관 내용을 보여주고 싶을 때 

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

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

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

이렇게 보여주기로 하자. 

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

function Component() {
  var 현재상태 = 'info';
  //var [현재상태,현재상태변경] = useState(['info', 'shipping', 'refund']);
  return (
    <div>
      {
        탭UI[현재상태]
        //탭UI[현재상태[0]]
      }
    </div>
  )
}

이렇게, 변수에 오브젝트를 저장해놓고, 키값의 형태가 문자열일때, 오브젝트에[]로 접근할 수 있으므로,

탭UI['info'] 이렇게 찾으면 <p>상품정보</p>을 내뱉는 형태가 된다. 

그리고 state형태로 현재상태를 담아도 가능하다. 

 

추가로 탭UI.info , 탭UI['info'] 둘 다 키 값을 가져올 수 있다. 키 값이 문자열이면 둘 다 가능하지만, 표현식이면 []만 사용가능하며 []은 안에 문자열이 와야한다.