리액트 혹은 next.js 환경에서 모달을 관리하는 방법이 궁금합니다.

안녕하세요 ! 저도 경험이 많지 않아 정답이라고 말씀드릴수는 없으나 사견정도로만 의견 드려봅니다! 1. 보통 모달의 경우 해당 페이지내에서 해당 모달이 담당하고있는 부분을 끝냈다면 닫는게 일반적이라고 생각되어져서 프로젝트 특성 상 꼭 필요한 부분이 아니라면 전역보다는 state로 관리하는게 좋을 것 같습니다. 모달 상태를 전역으로 들고 있는 것은 낭비일수도 있을 것 같습니다! 2. 전역관리로 하신다면 Redux 사용하고 계실까요 ? 단순히 모달만 꺼줘야한다면, 바로 떠오르는 방법은, useEffect에서 return 사용해서 unmount 될 때 모달 상태값을 변경해주면 될 것 같습니다!

1
2
3
4
5
6
7
8
9
useEffect(()=>{

return ()=>{

dispatch(modalActions.someModalState(false));

}

},[])

1. 여러개의 모달의 오픈 유무를 전역 상태에서 한번에 관리 하는 방법이 좋을까요? 아니면 열고 닫을때 필요한 state와 함수를 custom hooks로 만들어서 컴포넌트 내에서 state와 props로 관리 하는게 좋은가요? - 저는 전자의 방법이 좋은 것 같습니다. 모달의 경우 해당 페이지에서 사용되고 사라지는 경우가 많기 때문에 전역으로 관리하는 것은 좋지 않아보이고요, 만약 전역에서 모달이 열려있는 상태라고 했을 때 같은 모달을 다른페이지에서도 사용하게 되면 버그가 발생 할 수 있을 것 같아요. 말씀하신 것처럼 custom hook으로 감싸고 state로 관리하셔도 충분 할 것 같습니다. 전역으로 관리했을 때의 장점은 모달의 경우 한 페이지에서 1개만 사용하기 때문에 관리에 용이할 수 있을 것 같아요 2. 전역 관리를 선택했을시, 모달을 켜둔 채로 뒤로가기 혹은 앞으로가기 후에 다시 본래 페이지에 되돌아오면 모달이 켜진 상태로 유지가 됩니다. 이런 경우는 어떤 식으로 처리를 하시는 편인가요? 뒤로가기 버튼에 모달을 false로 바꾸는 이벤트를 추가하는 방법일까요? - 전역으로 관리하면 형래님께서 답변해주신것처럼 unmount 될 때 모달을 꺼주는 작업을 해야할 것 같습니다. 아니면 특정 페이지이동에서만 해당 모달을 꺼야한다면 해당 이동에서 모달의 open 상태를 변경해주시면 될 것 같고요 하지만 저는 모달의 관리는 전역보다 각 페이지에서 state로 관리하는게 더 좋아보입니다.