리액트 모달 팝업

언급하신데로 같은 페이지 내에서는 유지 이펙트로 버튼 제어 하면 그렇게 어렵지 않게 구현이 가능할 것입니다.

이제 다른 컴포넌트를 통해 이를 구현하려면 props 에 대한 이해가 필요합니다.

어려운 용어를 쉽게 풀이하면 부모가 가진 데이터를 자식에게 공유 해주는 것입니다.

질문 기준으로, 모달창을 열지 말지의 기준을 자식 컴포넌트 (모달)에게 넘겨주는 것이라 보시면 됩니다.

아래 코드 잠시 볼까요 ?

function App() {

  const [isOpen, setIsOpen] = useState(false);

 

 

const handleModal = () => {

    setIsOpen(!isOpen);

  };

 

  return (

    <>

      <button onClick={handleModal}>Open Modal</button>

      <Modal isOpen={isOpen} onClose={handleModal}>

        <h1>Modal Title</h1>

        <p>Modal Content</p>

      </Modal>

    </>

  );

}

코드 보시면 눈여겨 보셔야 하는게 <Modal isOpen={isOpen} onClose={handleModal}> 이부분입니다.

퍼블리셔니깐 이해쉽게 html 태그에 속성을 추가 해준다?라는 느낌으로 접근하면 됩니다.

작명=값 형태로 이루어져 있습니다. 

is는 보통 상태 작명을 하는 경우가 많아 구글 검색 결과에서도  isOpen 혹은 isModal 이라고 많이 쓸꺼에요

이렇게 되면 모달 컴포넌트 자체에서 이제 isOpen 과 onClose 를 사용할 수 있습니다.

물론 children 컨텐츠두요

다음 코드 볼까요?

const Modal = (props) => {

if (!props.isOpen) return null;

 

return (

    <ModalOverlay onClick={props.onClose}>

    <ModalContent onClick={(e) => e.stopPropagation()}>

        {props.children}

    </ModalContent>

    </ModalOverlay>

);

    };

이렇게 props라는 인자 값으로 사용 가능합니다.

props.isOpen / props.onClose 를 사용할 수 있게 됩니다. 

그럼 modal 컴포넌트 에서 액션은 다시 부모 컴포넌트에 전해져 동작하는 원리라 보시면 됩니다.

스크립트에 조금 익숙해지시면 구조 분해 할당이란 것도 배우게 되는데 그땐 좀 더 쉽게 접근이 가능합니다.

const Modal = ({ isOpen, onClose, children }) => {

  if (!isOpen) return null;

 

  return (

    <ModalOverlay onClick={onClose}>

      <ModalContent onClick={(e) => e.stopPropagation()}>

        {children}

      </ModalContent>

    </ModalOverlay>

  );

};

props를 받아올 때 구조 분해를 해버려서 그냥 일반 변수 처럼 {isOpen} 으로 사용 가능합니다.

props를 좀 더 이해하시면, 상태 관리에 대해서 접근이 쉬운데요

전역 상태 관리인 리덕스/툴킷도 props에 대한 이해가 있을 때 배우시는게 좋습니다.

너무 의존하지 마시라는 의미이기도 하구요

실제 대기업 프로젝트 때 전역 상태 관리 프로그램 사용 금지여서 props 천국이였던 하하하

쨋든 props 천국을 약간 빗대어 만든 쇼츠가 있어 소개 합니다.

https://youtube.com/shorts/u86KSUc9Ngg?si=cqyP1R7CZCHCCFSN

화이팅 하세요^0^)/.