팝업 컴포넌트 1차

 

 

 

"use client";

import { Button } from "./Buttons";

interface DefaultPopupProps{
    text: string;
    isOpen: boolean;
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const DefaultPopup = ({
    text,
    isOpen,
    setIsOpen
}: DefaultPopupProps) => {
    return (
        <div className="btn_pop_wrap">
            <Button
                text={text}
                onClick={() => setIsOpen(true)}
            />
            {isOpen && (
                <div className="pop_wrap">
                    <div className="pop_header">
                        <Button
                            text="X"
                            onClick={() => setIsOpen(false)}
                        />
                    </div>
                    <div className="pop_content">
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                        팝업 내용 <br />
                    </div>
                    <div className="pop_footer">
                        <Button
                            className="blue"
                            text='취소'
                            onClick={() => setIsOpen(false)}
                        />
                        <Button
                            className="red"
                            text='확인'
                        />
                    </div>
                </div>
            )}
        </div>
    )
}

export { DefaultPopup };

 

💻 useState 타입 지정

✔ isOpen: boolean;

=> 여기는 값이라서 boolean으로 받아도 됨
✔  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;

=> 들어오는 값이 변동되는 함수라서 타입을 이렇게 지정 해줘야 함

=> 상태를 바꿀 때 직접 값을 넣거나 이전 상태를 받아서 계산할 수 있음

 

✔  React.Dispatch<A>
함수 타입: 인자 A를 받아서 어떤 행동(상태 변경)을 실행
=> setIsOpen은 boolean 값 또는 상태 변경 함수를 인자로 받아 상태를 업데이트하는 함수라는 의미