React 동적 UI 만들기

동적인 UI 만들기 원칙

1. HTML CSS로 먼저 UI 디자인을 해놓는다.

2. UI의 현재 상태를 state로 저장해둔다.

3. state에 따라서 UI가 어떻게 보일지 조건문으로 작성한다.

 

 

아래는 Modal 컴포넌트가 있을 때 이 컴포넌트를 껐다 켰다 할 수 있는 기능을 만든 것이다.

function App() {
  let [modalToggle, setModalToggle] = useState(false);
  return(
    <div>
      <button onClick={ setModalToggle(!modalToggle) }> 모달창 띄우기 </button>
      {
        modalToggle == true ? <Modal/> : null
      }
    </div>
  );
}