React Modal 띄우기

useState 함수를 활용하여 버튼 누르면 Modal을 띄우도록 구현해보자

React 컴포넌트 만들 때

• 되도록이면 긴 JSX 블록은 피하고 개별 컴포넌트로 쪼개는 것이 좋다.
• 컴포넌트 함수는 작고 유지보수하기 쉽게 만드는 것이 좋다.

useState

useState는 리액트 라이브러리에서 import 해야 한다.
이 함수를 호출하면 사용하고자 하는 상태들을 등록할 수 있다.

리액트는 현재 활성화된 상태에 따라 다른 결과물을 렌더링한다.

import { useState } from 'react';

function Todo(props) {
  const [ modalIsOpen, setModalIsOpen ] = useState(false);
  return
}

export default Todo;

useState는 항상 2개의 요소를 가진 배열을 return한다.
1. 현재 state를 정의하는 초기값을 저장한다. - modalIsOpen
2. state 값을 변경하는 함수를 저장한다. - setModalIsOpen

그래서 state 변경 함수를 호출할 때마다 해당 state가 속해 있는 컴포넌트 함수를 재실행하여 state에 따라 다르게 렌더링할 수 있다.

import { useState } from 'react';

function Todo(props) {
  const [ modalIsOpen, setModalIsOpen ] = useState(false);
  
    function deleteHandler() {
    setModalIsOpen(true);
  }
  
  return
}

export default Todo;

deleteHandler()라는 함수를 만들고 그 안에 setModalIsOpen(true)로 modalIsOpen의 값을 true로 변경한다.

import { useState } from 'react';
import Backdrop from './Backdrop';
import Modal from './Modal';

function Todo(props) {
  const [ modalIsOpen, setModalIsOpen ] = useState(false);

  function deleteHandler() {
    setModalIsOpen(true);
  }
  
  return (
    <div className="card">
      <h2>{props.text}</h2>
      <div className="actions">
        <button className="btn" onClick={deleteHandler}>Delete</button>
      </div>
      {/* { modalIsOpen ? <Modal /> : null } */}
      { modalIsOpen && <Modal /> }
      { modalIsOpen && <Backdrop /> }
    </div>
  );
}

export default Todo;

그 후 JSX 코드에서 조건적으로 렌더링한다.

{ modalIsOpen ? <Modal /> : null }

• 삼항 연산자를 활용한 조건문
  modalIsOpen이 true 라면 Modal를 출력하고 false면 null을 출력한다.

{ modalIsOpen && <Modal /> }

• 논리 연산자를 활용한 조건문
  첫번째로 false인 값을 출력하고 모두 true면 마지막 값 출력한다.
  삼항 연산자보다 더 짧게 작성할 수 있다.

그럼 Modal 띄우기 성공!