[React] react에서의 조건문/조건부렌더링

 

1. 삼항연산자

2. AND연산자

3. IIFE(즉시실행 함수표현)

 

 

1. 삼항연산자

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>맞아요!</div>)
            : (<div>틀려요!</div>)
        }
      </div>
    );
  }
}

export default App;

앞의값이 참일 때 ?의 결과 / 거짓일 때 :의 결과

 

2. AND연산자

 

class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 && (<div>맞아요!</div>)
        }
      </div>
    );
  }
}

앞의 값이 참일 때만 뒤의 결과 거짓일 땐 Xxx

 

3.IIFE

class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>하나</div>);
            if (value === 2) return (<div>둘</div>);
            if (value === 3) return (<div>셋</div>);
          })()
        }
      </div>
    );
  }
}

//Arrow function

(() => {
  if (value === 1) return (<div>하나</div>);
  if (value === 2) return (<div>둘</div>);
  if (value === 3) return (<div>셋</div>);
})()

 

 

 

참고 공부 링크

velopert.com/3626