인프런 커뮤니티 질문&답변

day17과제하던중에, Context 객체 생성하는데 오류가 발생했습니다.

export를 붙여서 진행하면 화면과 같이 오류가 발생하고,

export를 제외하면 랜더링할때 빈화면이 나옵니다. 다른컴퍼넌트에는 useContext이용해서 함수 공급받는거 작성했습니다.

import "./App.css"
import Header from "./components/Header"
import ContactEditor from "./components/ContactEditor"
import List from "./components/List"
import {useState, useRef, useCallback, createContext, useMemo} from 'react'


const mockData = [  //임시데이터라는 뜻(mockData)
    {
        id: 0,
        name: "이정환",
        email: "king32@gmail.com"
    },
    {
        id: 1,
        name: "김정환",
        email: "queen25@gmail.com"
    },
    {
        id: 2,
        name: "하정환",
        email: "prince13@gmail.com"
    },
]


export const ContactStateContext = createContext();
export const ContactDispatchContext = createContext();

function App() {


    const [contact, setContact] = useState(mockData);
    const idRef = useRef(3)

    const onCreate = useCallback((name,email)=>{
        const newContact = {
            id: idRef.current++,
            name: name,
            email: email,
        };
        setContact([newContact, ...contact ]);
    },[]);

    const onDelete = useCallback((targetId) => {
        setContact(contact.filter((it) => it.id!== targetId));
    },[])

    const memoizedDispatch = useMemo(
        ()=>({onCreate, onDelete}),[]
    );

    return(
        <div className="App">
            <Header />
            <ContactStateContext.Provider value={contact}>
                <ContactDispatchContext.Provider value={memoizedDispatch}>
                    <ContactEditor />
                    <List />
                </ContactDispatchContext.Provider>
            </ContactStateContext.Provider>

        </div>
    )
}

export default App;