interface NavbarOptionListProps {
children: React.ReactNode & { onClose: () => void };
}
function NavbarOptionList({ children }: NavbarOptionListProps) {
const [isOpen, setIsOpen] = useState(false);
function toggleOpen() {
setIsOpen(!isOpen);
}
return (
<li>
<button className='optionBtn' onClick={toggleOpen}>
Change photo
</button>
{isOpen && <ModalPortal>{children}</ModalPortal>}
</li>
);
}
children: ReactNode를 받아서 button과 함께 리턴하는 컴포넌트임
단, children은 onClose를 구현해야 함.
interface에서 정의했기 때문에 반드시 children에서 구현돼야함!!
내가 하고싶은건 이 children에 onClose를 props로 보내고 싶은거임.
context로 전역관리 하기에는 <li>가 여러개라서 각각의 state를 관리하게되면 성능도 조지고 지저분해짐.
props.children에 정의된 콜백타입을 props로 보내는 방법이있음?
이건 안되고, 되어서도 안됨 ㅇㅇ 만약 된다면 데이터 흐름 좆됨
그니까 저 코드는 동작에 문제없는 코드인데 성능때문에 굳이 children에서 onclose를 뽑아서 props로 보내고싶다는거임?
현재컴포넌트(NavbarOptionList)에서 선언된 toggleOpen을 children에게 보내고싶은거임
{isOpen && } 이렇게 해서 ModalPortal에서 toggleOpen을 관리하면 안됨? 굳이 children에서 각각 관리해야됨? children이 버튼이니까 onclick={()=>toggleOpen()} 이렇게 쓰면 안되나
아 뭐야 이거 디시에서 코드 씹히네
ModalPortal toggleOpen={toggleOpen}