[react] jsx if문 정리

삼항연산자

import React from 'react';

function App() {
  const test = 12345;
  return (
  <div>
  {
    test === 12345 ? <div>맞아요</div> : <div>틀려요</div>
  }
  </div>
  );
}

export default App;

 = 맞아요 부분이 12345가 맞으면 해당 div 출력

 

 and 연산자 사용

import React from 'react';

function App() {
  const test = 12345;
  return (
    test === 12345 && <div>맞아요 (AND연산)</div>
  );
}

export default App;

 

즉시발동함수를 통한 조건문 처리

 

import React from 'react';

function App() {
  const word = 'react';
  return (
    <div>
    {
      (function(){
        if(word == 'react'){
          return ("리액트!")
        }else if(word == 'hello'){
          return ("헬로우!")
        }else if(word == 'world'){
          return ("월드!")
        }
      })()
    }
    </div>
  );
}

export default App;

 

 

즉시발동함수(화살표함수)를 통한 조건문 처리

 

return (
    <div>
    {
      (()=>{
        if(word == 'react'){
          return ("리액트!")