[코딩애플;React] 리액트에서 자주쓰는 if문 작성패턴 5개

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

function Component() {

    if ( true ) {

      return <p>참이면 보여줄 HTML</p>;

    } else {

      return null;

    }

  }

 

- return을 만나면 그 다음 코드는 실행하지 않으므로  else 생략 가능

function Component() {

    if ( true ) {

      return <p>참이면 보여줄 HTML</p>;

    }

    return null;

  }

 

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

조건문 ? 조건문이 참일 때 실행하는 코드 : 조건문이 거짓일 때 코드

function Component() {

    return (

      <div>

        {

          1 === 1

          ? <p>참이면 보여줄 HTML</p>

          : null

        }

      </div>

    )

  }

 

-삼항 연산자는 중첩사용도 가능하다.

function Component() {

    return (

      <div>

        {

          1 === 1

          ? <p>참이면 보여줄 HTML</p>

          : ( 2 === 2

              ? <p>안녕</p>

              : <p>반갑</p>

            )

        }

      </div>

    )

  }

 

 

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

UI만들 때 축약해서 사용하기 좋음.

두 경우 모두 true면 전체를 true로 바꿔주세요 라는 코드 작성하고 싶을 때 사용

 

true && false; //false

true && true; //true

 

 

-true/false값이 아니라 자료형을 넣으면

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

false && '안녕'; //false

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

 

*자바스크립트는 그냥 &&로 연결된 값 중에 처음 등장하는 falsy값을 찾아주고 그게 아니면 마지막 값을 남겨줌.

 

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가 되어 HTML으로 랜더링 하지 않음.

 

4.Switch/case 조건문

 

function Component2(){

    var user = 'seller';

    if (user === 'seller'){

      return <h4>판매자 로그인</h4>

    } else if (user === 'customer'){

      return <h4>구매자 로그인</h4>

    } else {

      return <h4>그냥 로그인</h4>

    }

  }

 

 

괄호 없이

function Component2(){

    var user = 'seller';

    switch (user){

      case 'seller' :

        return <h4>판매자 로그인</h4>

      case 'customer' :

        return <h4>구매자 로그인</h4>

      default :

        return <h4>그냥 로그인</h4>

    }

  }

 

-장점 : if문 연달아 쓸 때 코드가 줄어들 수 있지만

-단점 : 조건식란에 변수를 하나만 검사할 수 있다.

 

5.object/array 자료형 응용

예를들어 탭에서

현재 state가 info면 상품정보, shipping이면 배송정보 , refund는 환불약관을 보여주고 싶을 때

if문이 아니라 자바스크립트 object 자료형에 내가 보여주고 싶은 html을 다 담는다.

 

function Component() {

    var 현재상태 = 'info';

    return (

      <div>

        {

          {

             info : <p>상품정보</p>,

             shipping : <p>배송관련</p>,

             refund : <p>환불약관</p>

          }[현재상태]

        }

 

      </div>

    )

  }

 

이렇게 정리한 후

key값이 현재상태인 자료를 뽑겠다 라는 식으로 이 변수의 값이 변할 때마다 다른 html을 보여줄 수 있다.

 

var 탭UI = {

    info : <p>상품정보</p>,

    shipping : <p>배송관련</p>,

    refund : <p>환불약관</p>

  }

 

  function Component() {

    var 현재상태 = 'info';

    return (

      <div>

        {

          탭UI[현재상태]

        }

      </div>

    )

  }