자.. 역시 정리용 포스팅.
하지만 모달 같은 컴포넌트는 어느 프로젝트에서나 필요한 요소일 수 있기 때문에 한번 정리해두고 두고두고 참고해서 사용하자
중요한 포인트는
Redux 를 활용해서 언제든지 꺼내서 쓸 수 있을 것
Modal 에 text, 함수를 전달하여 상황에 맞게 사용할 것
1. redux/modal/modalSlice.tsx
역시나 리덕스가 궁금하시다면 ➡️ 이쪽으로
세팅을 맞추면 store 에 넣으러 갑시다.
2. redux/store.ts
미들웨어로 redux-thunk 를 사용했습니다. 사용하게 된 이유는
초기 값을 나타내는 initialState 에 함수를 넣을 수 없기 때문 입니다.
Redux의 객체 initialState는 애플리케이션의 초기 상태를 나타내는 일반 JavaScript 객체여야 합니다.
thunk 를 사용하지 않으시면 아래 에러가 나타날 수 있습니다..
app-index.js:32 A non-serializable value was detected in the state, in the path:
modal.content. Value: ()=>handleModal() Take a look at the reducer(s) handling this action type: modal/openModal.
2. components/utils/Modal.tsx
먼저 만인의 친구 chat GPT에게 정리를 부탁했습니다.. 제가 설명하는 것보다 잘할 거 같아서
이 코드는 모달 창을 렌더링하는 Modal이라는 React 구성 요소를 나타냅니다. 코드를 분석하고 각 부분을 설명하겠습니다.
시작 부분의 import 문은 다른 모듈에서 필요한 종속성과 기능을 가져오는 데 사용됩니다. Modal 구성 요소는 JSX(JavaScript XML) 코드를 반환하는 함수 구성 요소로 정의됩니다.
React Redux의 useSelector는 Redux 스토어의 모달 상태에서
isOpen,title,content및move값을 추출하는 데 사용됩니다.React Redux의
useDispatch는 작업을 트리거하는 데 사용되는 디스패치 함수에 대한 참조를 가져오는 데 사용됩니다.useRef는 모달의 DOM 요소에 첨부될 modalRef라는 ref 객체를 생성하는 데 사용됩니다.handleCloseModal함수는 모달을 닫아야 할 때 closeModal 작업을 디스패치하도록 정의됩니다.첫 번째
useEffect는 모달이 열려 있을 때 문서에 이벤트 리스너를 추가 하는 데 사용됩니다. mousedown 이벤트를 수신하고 이벤트 대상이 모달 외부에 있는지 확인합니다. 그렇다면 closeModal 작업이 전달됩니다.두 번째
useEffect는 사용자가 브라우저의 기록을 사용하여 탐색 할 때 트리거되는 창의 popstate 이벤트에 이벤트 리스너를 추가하는 데 사용됩니다. 그러한 경우 모달을 닫기 위해 handleCloseModal 함수를 호출합니다.JSX 코드는 모달 UI를 나타냅니다.
isOpen 상태를 기반으로 모달 콘텐츠를 조건부로 렌더링합니다.modalRef는 모달 외부의 클릭을 추적 하기 위해 외부<div>요소에 할당됩니다. 모달 콘텐츠에는 제목, handleCloseModal 함수를 트리거하는 닫기 버튼, 이동 함수에 바인딩된 클릭 이벤트 핸들러가 있는 span 요소가 포함됩니다.모달에 적용된 CSS 클래스 및 인라인 스타일은 모달이 화면 중앙에 배치되고 반투명 배경 오버레이가 있는지 확인합니다.
요약하면 이 코드는 다른 구성 요소 위에 콘텐츠를 표시하는 데 사용할 수 있는 재사용 가능한 모달 구성 요소를 나타냅니다.
모달 상태를 관리하기 위해 Redux를 활용하고
사용자가 문서와 상호 작용하거나 브라우저의 기록을 사용하여 탐색할 때 모달을 닫는 이벤트 리스너를 포함합니다.
4. 호출 하는 경우
마무리
금방 끝날 줄 알았던 녀석인데.. 역시 하루를 다 소비했다.
하지만 하루 안에 동작하게 만든 걸 오히려 감사하게 생각하며 앞으로 유용하게 잘 써야겠다 👍