야호
- 목적 : '회원탈퇴'버튼을 클릭하면 정보 팝업창이 뜨고 팝업창에 있는 '취소'버튼을 클릭하면 팝업창이 닫히는 기능을 구현하고 싶었음.
- 상황 : '회원탈퇴'버튼은 Mypage.tsx파일에 있고, '취소'버튼은 Withdrawal.tsx 파일에 있어서 prop를 이동해야 하는 상황
신나는 코딩 시작 (•̀ᴗ•́) ̑̑و
//Mypage.tsx
export interface PropsType {
popup: boolean;
}
const MypageTab = () => {
const [popup, setPopup] = useState<PropsType['popup']>(false);
return (
<ContentsList>
<p onClick={() => setPopup(true)}>회원탈퇴</p>
</ContentsList>
<ContentsResult>
{popup === true && <Withdrawal togglePop={togglePop} />}
</ContentsResult>
);
};
//Withdrawal.tsx
import { PropsType } from './MypageTab';
const Withdrawal = ({popup,}: {popup: PropsType['popup'];}): JSX.Element | any => {
const onPopupToggle = (popup: any) => {
popup(!popup);
console.log(popup);
};
if (popup) {
return (
<Popup>
<Btn fontColor="#666" backgroundColor="#fff" padding="11px 26px">
취소
</Btn>
</Popup>
);
}
};
오류감옥에 갇힘..
검색.. 검색... 이유... 보내는법.. interface.. props.. react ..
몇일을 고민하다가 해결법을 찾음 야호
//Mypage.tsx
const MypageTab = () => {
const [popup, setPopup] = useState<boolean>(false);
const togglePop = () => {
setPopup(!popup);
};
return (
<ContentsList>
<p onClick={() => setPopup(true)}>회원탈퇴</p>
</ContentsList>
<ContentsResult>
{popup === true && <Withdrawal togglePop={togglePop} />}
</ContentsResult>
);
};
//Withdrawal.tsx
interface Prop {
togglePop: () => void;
}
const Withdrawal = ({ togglePop }: Prop): JSX.Element | any => {
return (
<Popup>
<Btn
fontColor="#666"
backgroundColor="#fff"
padding="11px 26px"
onClick={togglePop}
>
취소
</Btn>
</Popup>
);
};
성공!