React 조건문 사용방법

조건문을 이용해 랜더링하는 컴포넌트를 바꿀 수 있다.

 

App.js

Wrap에 status값을 보내준다. ( Boolean는 JS문법이기 때문에 { }를 사용한다. )

*Boolean값은 따로 false true 값을 주지않으면 default로 true이다.

import logo from './logo.svg'
import './App.css'
import {Wrap} from './Wrap'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Wrap status={false}></Wrap>
      </header>
    </div>
  )
}

export default App

Wrap.js

Wrap.js에서 status를 확인하고 true라면 <Hello3>를 랜더링하고, false라면 <Hello4>를 랜더링한다.

import {Hello3, Hello4} from './Hello'
function Wrap({status}) {
  if (status) {
    return (
      <div>
        <Hello3
          hello="안녕하세요"
          introduce="제 이름은 리액트 입니다."
          color="aqua"
          wrap="저는 Wrap에서 봅니다."
          // defaultData="데이터가 있습니다"
        ></Hello3>
      </div>
    )
  } else {
    return <Hello4 />
  }
}
export {Wrap}


//// 삼항연산자 사용

import {Hello3, Hello4} from './Hello'
function Wrap({status}) {
  return (
    <div>
      {status ? (<Hello3
          hello="안녕하세요"
          introduce="제 이름은 리액트 입니다."
          color="aqua"
          wrap="저는 Wrap에서 봅니다."
          // defaultData="데이터가 있습니다"
        ></Hello3>) : (
        <Hello4 />
      )}
    </div>
  )
}
export {Wrap}

Hello.js

function Hello3(propsData) {
  return (
    <div>
      <div>{propsData.hello}</div>
      <div style={{color: propsData.color}}>{propsData.introduce}</div>
      <div>{propsData.defaultData}</div>
    </div>
  )
}

Hello3.defaultProps = {
  defaultData: '데이터가 없습니다.',
}

function Hello4() {
  return (
    <div>
      <div>false 입니다.</div>
    </div>
  )
}

export {Hello3, Hello4}

 

결과 :

 

출처 : https://react.vlpt.us/basic/06-conditional-rendering.html