React if문

〰 if문

❗  리액트 중괄호 내에서 if문을 사용할 수 없어서 if문 대용 역할을 할 수 있는 삼항연산자를 사용합니다.

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

ex) 버튼 눌렀을 때 열리고 한번 더 누르면 닫히는 내용

function App (){
  let [내용, 내용변경] = useState(false);
  return (
    <div>
      HTML 잔뜩있는 곳   
      { 
         1 < 3 
         ? <div>내용<div/>
         : null
      }
    </div>
  )
}

내용 이라는 state를 만들었고 기본값은 false로 주었습니다.

function App (){
  let [내용, 내용변경] = useState(false);
  return (
    <div>
      HTML 잔뜩있는 곳
      <button onClick={ ()=>{ 내용변경(!내용) } }> 열기 </button>
      { 
         modal === true 
         ? <div>내용<div/>
         : null
      }
    </div>
  )
}