리액트(React)-리액트에서 조건문 사용하기

리액트에서 조건문 사용하는 법

만약 버튼 누르면 원하는 UI 등장하게 하고 싶다면
if문 사용하면 된다.

하지만

리액트 내에서 중괄호{} 안에 if문은 사용이 불가능하다.

대신 삼항 연산자를 사용할 수 있다.

삼항 연산자란?

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

=
if(조건식) 실행할 코드 else {실행할 코드}

---

      {modal === true ? <Modal /> : null}

이건 modal 이 true 면 Modal 을 보이게, 그렇지 않으면 null 로 해달라는 코드(텅 빈 코드)

UI 보이게/안보이게 하는 법

1. 모달창이 보이는/보이지 않는 데이터를 저장할 state를 만든다.

   let [modal, modal변경] = useState(false);

   modal 이라는 변수를 만들고, 기본값을 false로 설정한다.
   일종의 온오프 스위치라고 보면 쉽다.

2. 조건문을 이용해 스위치가 켜졌을 때만 모달창이 보이게 만든다.

   function App (){
   let [modal, modal변경] = useState(false);
   return (
   <div>
     HTML 이것저것
     
    { 
        modal === true ? <Modal /> : null
    }
   </div>
     )
   }

   modal의 기본값은 false로 지정되어 있기 때문에 안보인다.

function App (){

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

'열기' 라는 버튼을 눌렀을때 modal state의 데이터변경함수인 'modal변경'이 true가 되도록 써준다.

---

이해는 가고 쉬워보이지만 처음부터 혼자 새로만들려니 손이 안움직인다.