👻 문제 상황

1. material-tailwind/react를 사용해서 Modal창을 구성하고자 하였다.
2. 컴포넌트를 분리해서 기록해놨기 때문에 모달창을 설정하기 위한 state를 props로 2단계 이상 drilling해야 했다.

✅ 문제 해결방안 도출 과정

문제 해결 방안으로 생각한 것은 Recoil로 Modal을 관리하는 방법이었다.

이에 대한 근거는 먼저 Recoil을 통해서 클라이언트 전역 상태를 관리하면 state를 props로 drilling하지 않고 가져올 수 있기 때문이었다. 어느 컴포넌트에서도 Modal을 관리할 state에 접근해야 했다.

✅ 문제 해결 과정

1. Atom, selector 정의하기

import { atom } from 'recoil';

export const modalState = atom({
	key: 'modalState',
	default: false, // 모달의 초기 상태 (닫힌 상태)
});

atom의 최초 상태를 정의했다.

2. 커스텀 훅 제작하기

import { useRecoilState } from 'recoil';
import { modalState } from '../atom/modalAtom';

export function useToggleModal() {
	const [isOpen, setIsOpen] = useRecoilState(modalState);

	// 모달 열기 함수
	const openModal = () => {
		setIsOpen(cur => !cur);
	};

	return { isOpen, openModal };
}

이후 openModal을 관리할 수 있고, 현재 상태를 전달할 수 있는 value들이 필요했기 때문에 이를 커스텀 hook으로 만들어서 사용했다.

3. eventHandler 등록하기

const handleClick = (item: Record<string, string | number>) => {
		const updateData = { ...nowClick, ...item };
		setNowClick(updateData);
		openModal();
	};

이후 버튼에 onClick으로 해당 함수를 실행시키도록 했다.

4. Modal창 관리하기

export function DialogWithImage() {
	const isOpen = useRecoilValue(modalState);
	const nowClick = useRecoilValue(getNowClick);
	const { openModal } = useToggleModal();

	return (
		<>
			<Dialog
				size="xl"
				open={isOpen}
				handler={openModal}
				className="w-full h-3/4 flex flex-col"
			>
                  ...

모달창에 속성으로 다시 atom에서 정의한 값과 handler 함수를 등록하였다.

✅ 결론

state를 만들어서 props로 drilling하지 않아도 돼서 props를 관심사에 맞게 분리할 수 있어서 가독성이 증가한 것 같다.