리액트 조건문 패턴

리액트로 프로그램을 개발하다 보면, JSX에서나 일반 코드 작성 시에 조건문을 사용할 경우가 매우 많다.

하지만, JSX에서는 if문이나 switch문을 사용하는데 제한이 있기 때문에 && 연산자나 삼항연산자가 많이 사용된다.

지금부터 리액트에서 조건문이 어떻게 사용되는지 살펴보겠다.

1. if/else

function Component() {
  if ( true ) {
    return <p>true면 보입니다.</p>;
  } else {
    return null;
  }
} 

컴포넌트에서 JSX를 조건에 따라서 보여주고 싶다면 다음과 같이 적성하면 된다.

자바스크립트에서 쓰던 if문은 컴포넌트의 return () 안, 즉 JSX 내에서는 사용할 수 없다.

• ❌ <div> if (조건) {statement} </div>

2. 삼항연산자

앞서 말했다시피 삼항연산자는 주로 JSX에서 사용된다.

삼항연산자의 문법은 다음과 같다.

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

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>조건이 참이면 실행됩니다.</p>
        : null
      }
    </div>
  )
} 

삼항연산자를 다음과 같이 중첩해서 사용하는것도 가능합니다.

function Component() {
  return (
    <div>
      {
        2 === 1
        ? <p>첫번째 조건이 참이면 실행됩니다.</p>
        : ( 2 === 2 
            ? <p>첫번째 조건이 참이 아니고 두번째 조건이 참이면 실행됩니다.</p> 
            : <p>첫번째 조건이 참이 아니고 두번째 조건도 참이 아니면 실행됩니다.</p> 
          )
      }
    </div>
  )
} 

하지만 코드가 눈에 쉽게 들어오지 않기 때문에 무언가 눈이 불편하다.

3. && 연산자

자바스크립트에 && 연산자라는게 존재한다.

보통 우리 코린이들이 알고 있는 &&연산자 사용법은 어떤 조건문에서
조건 && 조건 두 가지 조건을 모두 만족하는 경우 true를 반환해 조건문을 실행하는 경우이다.

하지만 리액트에서는 다음과 같이 조건문처럼 사용할 수 있다.

function Component() {
  return (
    <div>
      {
        1 === 1 && <p>참이면 실행됩니다.</p>
      }
    </div>
  )
}

다음 코드는 && 연산자로 조건식과 오른쪽 JSX 구문을 비교하고 있다.

왼쪽의 조건이 참이면 오른쪽의 JSX 구문이 실행이 되고 왼쪽 조건이 거짓이면 왼쪽 조건에서 연산이 끝나게 된다.

여기서 중요한 점은 JSX 구문은 렌더링이 되지만 거짓인 조건은 렌더링이 되지 않는다는 점이다.

4. switch / case

switch / case 조건문은 리액트보다 리덕스에서 리듀서함수에서 action의 type을 다룰 때 자주 사용되기는 한다.

• if 문을 사용한 리듀서 함수

function reducer(state, action){
  
  if (action.type === 'INCREMENT'){
    return {
                ...state,
                number: state.number + 1 ,
            } ;
  } else if (action.type === 'DECREMENT'){
    return {
                ...state,
                number: state.number - 1,
            } ;
  } else {
    return state
  }
}

• switch/case 문을 사용한 리듀서 함수

function reducer(state, action){
  
  switch (action.type) {
    case 'INCREMENT' :
	  return {
        ...state,
        number: state.number + 1,
      }
    case 'DECREMENT' : 
	  return {
        ...state,
        number: state.number - 1,
      }
    default : 
      return state
  }

}

swich / case 문법
1. switch ( 조건 ) {statement}
2. statement 안에 case를 나눠 준다.
3. 해당 case에서 실행된 statement는 콜론(:) 이후에 작성한다.
4. default는 어떤 case에도 만족하지 않는 경우에 처리할 로직에 대해서 작성한다.

5. enum

우리의 프로젝트에 네비게이션바를 제작한다고 가정해보자.

네비게이션 바에는 로그인을 할 수 있는 링크, 회원가입을 할 수 있는 링크, 홈으로 이동할 수 있는 링크 등이 있을 수 있다.

이 네비게이션 바는 어떤 상태 값에 따라 하나의 링크만을 보여주는 네비게이션 바이다.

현재 state가 login이면 로그인

현재 state가 register이면 회원가입

현재 state가 home이면 홈

state를 만들어놓고 if문으로 state를 검사하는 조건문으로 작성할 수도 있겠지만 객체 자료형에 HTML을 다 때려 넣는다.

• current_state 값에 따른 enum

function Component() {
  var current_state = 'info';
  return (
    <div>
      {
        { 
           login : <a>로그인</a>,
           register : <a>회원가입</a>,
           home : <a>홈</a>
        }[current_state]
      }

    </div>
  )
} 

이렇게 객체 자료형에 JSX로 뽑을 자료를 넣고 [] 대괄호를 붙여 current_state에 해당하는 속성을 사용할 수 있다.

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

• 객체를 변수로 저장해놓고 사용하는 enum

var UI = { 
  login : <a>로그인</a>,
  register : <a>회원가입</a>,
  home : <a>홈</a>
}

function Component() {
  var current_state = 'info';
  return (
    <div>
      {
        UI[current_state]
      }
    </div>
  )
}