23.06.23) React 모달 만들기

💡두가지 형태의 모달창 만들기

• 모달버튼 A : 닫기, 확인버튼이 있고, overlay를 클릭했을 때 모달이 닫히지 않는 형태
• 모달버튼 B : 닫기 버튼만 있고, overlay를 클릭했을 때 모달이 닫히는 형태
• css는 styled-components 적용

 

👉모달 상태 설정하기

const [isModalA, setIsModalA] = useState(false);
const [isModalB, setIsModalB] = useState(false);

1. useState 훅을 사용하여 isModalA와 isModalB라는 두 개의 상태를 설정한다

2. 초기값으로 false가 설정

  ▷boolean 값 설정이유 : 모달이 열려있는지를 나타낸다

 

 

👉모달 열고 닫는 이벤트 추가

//Modal A

const openModalA = () => {
    setIsModalA(true);
  };

 const closeModalA = () => {
    setIsModalA(false);
  };

1. openModalA 함수 : 모달 A를 열기 위해 setIsModalA를 true로 설정한다

2. closeModalA 함수 : 모달 A를 닫기 위해 setIsModalA를 false로 설정한다

  ▷onClick 이벤트 핸들러를 사용해서 "Close"버튼을 클릭했을 경우에만 모달을 닫는다

 

//Modal B 
 
 const openModalB = () => {
    setIsModalB(true);
  };

  const closeModalB = (event) => {
    if (event.target === event.currentTarget) {
      setIsModalB(false);
    }
  };

1. openModalB 함수 : 모달 B를 열기 위해 setIsModalB를 true로 설정한다

2. closeModalB 함수 : 모달 B를 닫기 위해 setIsModalB를 false로 설정한다

  ▷onClick 이벤트 핸들러를 사용해서 모달B버튼 조건에 맞게 클릭했을때,

    즉event.target이 event.currentTarget인 경우에 모달을 닫는다 

 

 

👉컴포넌트 렌더링 결과 반환

  {isModalA && (
        <StModalOverlay>
          <StModalContent>
            <h2>open modal</h2>
            <p>Close 버튼을 눌러야 모달이 닫혀요.</p>
            <StBtn
              backgroundColor="#71ba63"
              activeColor="#558a4a"
              onClick={closeModalA}
            >
              Close
            </StBtn>
            <StBtn backgroundColor="#c4b7ba" activeColor="#7d7f7d">
              ok
            </StBtn>
          </StModalContent>
        </StModalOverlay>
      )}

1. 조건부 렌더링 {isModalA && ...}을 사용해서  isModalA가 true일 때에만 모달 A의 JSX를 렌더링한다.

2. <StBtn>Close</StBtn> : onClick함수를 이용해 "Close"버튼을 클릭했을때 closeModalA 함수 실행

  ▷모달B도 동일한 결과를 반환 (모달오버레이와, Close버튼 클릭했을시)

{isModalB && (
        <StModalOverlay onClick={closeModalB}>
          <StModalContent>
            <h2>open modal</h2>
            <p>Close 버튼을 누르거나 외부 영역을 누르면 모달이 닫혀요.</p>
            <StBtn
              backgroundColor="#f29da6"
              activeColor="#fa4b5c"
              onClick={closeModalB}
            >
              Close
            </StBtn>
          </StModalContent>
        </StModalOverlay>
      )}

• <StModalOverlay onClick={closeModalB}><StModalContent>
• <StBtn>Close</StBtn>