[react] UI창, on/off 기능 만들기 (useState, true, false )

화면에 UI 창을 띄우고, 없애는 기본 버튼 on,off 기능을 useState를 사용하면 간단히 만들 수 있다.

ex) 보였다 안보이게하는 UI창, on-of 토글, loding 창 등등

ON : modal 값 true인 상태

OFF : modal 값 false인 상태

useState로 on/off로 상태변경하도록 기본 셋팅

1. UI와 관련된 중요 정보들을 state로 저장
2. state에 따라서 UI가 수정되게 만들기

• useState로 화면으로 알림창이 없을떄(of 일때) 기본값 설정 : false
• 버튼을 눌렀을때 화면에 알림창이 뜰때(on 일때) 변하는 값 : true

어떤 버튼을 눌렀을때 알림창의 false 상태를 변경해줄 setModal 상태변경함수를 사용하여 true로 변경해도록 설정한 것, 이 것을 이용하여 false일때 창이 안뜨게 true일떄 창이 뜨게 할 수 있다,.

  let [modal, setModal] = useState(false);

알림창을 띄우고 끌 on/off 기능 버튼 생성

onClick 핸들이벤트함수를 사용하여 버튼을 눌렀을떄 상태변경함수가 실행되도록 한다.

setModal(!modal);=> !false => true 즉 버튼을 눌러 함수 실행시 true로 바뀐다.

 <button onClick={() => { setModal(!modal);}}> on/off버튼  </button>

화면에 띄울 알림창(컴포넌트) 따로 생성하기

function Modal() {
  return (
    <>
      <div className="modal">
        <h2>알림창</h2>
        <p>까꿍! on 상태입니다!</p>
      </div>
    </>
  );
}

만들어둔 알림 창(컴포넌트) 상태값에 따라 화면에 띄우고 안띄우기 : 삼항연산자

modal이 true일 경우 Modal 컴포넌트(알림창)을 화면에 띄우고 아닌경우 null 아무것도 띄우지 않도록 설정하면된다!

  {modal ? <Modal /> : null}