본문 바로가기
코딩

props 상위 컴포넌트로 올리고 하위 컴포넌트로 내리기

by KUROMI98 2024. 9. 26.
PROPS



Import navn
export default function Layout({ children }) {
 const [hamburgerMenuOpened, setHamburgerMenuOpened] = useState(false)

    const hamburgerMenuOpener=()=>{
        setHamburgerMenuOpened(true)
    }
    const hamburgerMenuCloser=()=>{
        setHamburgerMenuOpened(false)
    }
 Return <Navn open={hamburgerMenuOpener} close={hamburgerMenuCloser}/> //아래로 내려주는코드





import HamburgerMenu from './hamburger-menu';
function navn(props)
    const [hamburgerOpen, setHamburgerOpen] = useState(false);
    const hamburgerOpener = () => {
        setHamburgerOpen(true);
        props.open() // 위로 올려주는 코드
    };
    const hamburgerCloser = () => {
        setHamburgerOpen(false);
        props.close() // 위로 올려주는 코드
    };

<button onClick={hamburgerOpener}>
	<MenuOutlined color='secondary'/>
</button>
Return <HamburgerMenu open={hamburgerOpen} close={hamburgerCloser} />





export default function HamburgerMenu(props) {
    const open = props.open
    const close = props.close

댓글