해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
day17과제중 Context 객체생성 오류발생했습니다.
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;
