[셀프해결] 전역 모달에서 click event로 모달을 핸들링하려는데, invalid hook call 에러가 뜹니다.

Question

안녕하세요.간단한 청첩장 웹앱을 만들고 있습니다.앱에서 공통으로 사용할 수 있는 공통 모달을 전역적으로 관리하기 위해서 리덕스 스토어에서 핸들링하고자 합니다.store/modalSlice.jsexport const modalSlice = createSlice({ name: 'modal', initialState, reducers: { openModal: (state, actions) => { const { modalContent } = actions.payload const updateState = { ...state, isOpen: true, modalContent, } return updateState }, closeModal: (state, actions) => { console.log(actions) const updateState = { ...initialState, } return updateState }, }, })이렇게 모달을 on/off 할 수 있는 함수를 액션으로 정의하고 필요한 곳에서 해당 액션을 dispatch해서 모달을 핸들링하려고 합니다.메뉴를 클릭해서 모달을 on 하는 것에는 이상이 없는데,같은 방식으로 구현했다고 생각하는 off가 정상적으로 작동하지 않습니다.이런 에러가 나오는데 에러 메시지에 있는 1, 3번은 확실히 이상이 없다고 확인이 되고 2번째 사항 또한 공식 문서를 참고하여 확인해봤는데 이상이 있는 부분은 확인되지 않습니다.아래는 모달 컴포넌트 내부 소스 코드입니다.const Modal = () => { const dispatch = useDispatch const { modalContent } = useSelector((state) => state.modal) const modalHandler = (e) => { dispatch(closeModal()) } return ( <> {modalContent} 취소 확인 ) }도움 주시면 감사하겠습니다!!!!!!

mmaryyy · Answer

세상에. 너무 부끄러운 실수 때문이었습니다.저와 같은 경우는 없을테지만 .. 제 실수를 제대로 기억하기 위해서 부끄럽지만 답글로 남깁니다.const dispatch = useDispatch()ㅠㅠ 시간내어 읽어주셔서 감사합니다.

[셀프해결] 전역 모달에서 click event로 모달을 핸들링하려는데, invalid hook call 에러가 뜹니다.

1개의 답변

Q&A 목록