reduxToolkit에 컴퍼넌트 전역변수 저장시 생기는 에러 해결(모달-4)

		dispatch(openModal({ modalComponent: 'auth', modalSize: 300 }));

위 코드는 현재 수정된 코드인데 이때 'auth'대신에    <AuthWrap/>  이라는 컴퍼넌트를 넘겼었다.

이럴 경우  

에러가 뜬다. 직렬화 관련 에러인데, store에 리엑트 컴퍼넌트를 저장하면 위와 같이 payload.$$typeof 값이 저장되는 이 값에 의해서 에러가 뜨는 것 ( 코드는 정상작동해서 늦게 알았습니다).

이를 해결하기 위해서 1. 배열안에 넣기 2. 객체 안에 넣기 등의 방법을 시도했는데 다 실패했습니다.

마지막으로 선택한 해결 방법은  컴터넌트를 저장하는 것이 아니라 string 값을 저장하고, CommonModal 컴퍼넌트에서 &&로 확인하는 것 입니다. 잉럴 경우 && 에 의해서 조건이 틀릴 경우 렌더링 되지 않기 때문에, 컴퍼넌트가 늘어놔도 큰 타격이 없다고 생각했습니다( 차선이라고 생각했습니다.)

<Modal
			bodyStyle={{ display: 'flex', justifyContent: 'center' }}
			open={modalState}
			footer={null}
			onCancel={onCloseModal}
			keyboard
			centered
			maskClosable
			width={size}
		>
			{modalComp === 'auth' && <AuthWrap />}
		</Modal>

 

 

	const modalOpen = () => {
		const modalSize = window.innerWidth >= 1000 ? 600 : 450;

		dispatch(openModal({ modalComponent: 'auth', modalSize: modalSize }));
	};

혹시 더 좋은 방법이 있따면 알려주시면 감사합니다..