목록modal상태관리 (1)

이다닷

[React] Day 29 - Modal 팝업창 띄우기

방법1. 상태 (State)를 이용하여 활용한 Modal 구현 1. 상태 (State)를 사용하여 Modal의 열림 또는 닫힘 상태를 관리한다. 2. 조건부 렌더링을 통하여 Modal의 표시 여부를 설정한다. 3. Modal 컴포넌트 내부에 필요한 컨텐츠를 포함시킨다. 상태 변경 방법 setIsOpen(true); => modal을 열겠다고 허락해 준 상황. 함수 선언 부분에서 const [isOpen, setIsOpen] = useState(false); 이렇게 상태를 선언해주고, return() 부분에서 modal의 열림과 닫힘을 확인하기 위해서 if (isOpen) 의 상황이라면 modal의 내용을 띄울 수 있게 설정한다. 방법2. 외부 라이브러리 사용 - 'react-modal' 라이브러리 사용 ..
React 2024. 1. 19. 00:31
이전 Prev 1 Next 다음