[#1] 상위 컴포넌트로 데이터 전달

[wnsdudSoftkim]

Home.js (상위)

import React from 'react'
import Section from './Section'
import Footer from './Footer'
import Header from './Header'

function Home() {
    function handlecreate(data) {
        console.log("홈 데이터"+JSON.stringify(data))
    }
    return (
        <>
            <Header/>
            <Section />
            <Footer onCreate={handlecreate} />
        </>
    )
}
export default Home

Footer.js (하위)

import React ,{useState}from 'react'
import { AiFillAudio,AiOutlineVideoCamera,AiOutlineFullscreen,AiOutlineUsergroupAdd} from "react-icons/ai";
import './Footer.scss'
import { BsChatSquareDots } from "react-icons/bs";
import Section from './Section';
import Home from './Home'
function Footer(props) {
    const [setting,Setsetting] = useState({
        video:false,
        audio:false
    })
    const onClickVideo = () => {
        Setsetting({
            ...setting,
            video : !setting.video
        })
        console.log("비디오 활성화 상태:"+setting.video)
        props.onCreate(setting)
        
    }
    const onClickAudio = ()=> {
        Setsetting({
            ...setting,
            audio : !setting.audio
        })
        console.log("오디오 활성화 상태:"+setting.audio)
        
        props.onCreate(setting)
    }
    return (
        <>
           <div className="footer">
               <div className="menu">
                   <p className="user_name">김준영</p>
                    <div className="menu_icon">
                        <AiFillAudio onClick={onClickAudio} className="icon audio"/>
                         <AiOutlineVideoCamera onClick={onClickVideo} className="icon video" />
                         <AiOutlineUsergroupAdd className="icon usergroupadd"/>
                         <BsChatSquareDots className="icon chat"/>
                         <AiOutlineFullscreen className="icon fullscreen"/>

                         
                    </div>
                    
               </div>
           </div>
        </>
    )
}
export default Footer