Day 16 Mission

과제) 연락처 앱(Contact List) 프로젝트에 Context 적용하기

이번 과제는 Day 16에서 최적화한 "연락처 앱"에 Context를 적용해보는 과제입니다.
아래 미션 소개 섹션에 안내되어 있는 순서에 따라 진행하세요.

미션 소개

사용자가 새로운 연락처를 등록하고 삭제할 수 있는 연락처 앱을 만듭니다.

Context를 사용하도록 프로젝트 업그레이드하기

React의 Context를 사용해 프로젝트를 업그레이드 해 주세요

• App 컴포넌트의 contacts State를 공급할 Context 객체를 하나 생성하세요
• App 컴포넌트의 onCreateContact, onRemoveContact를 공급할 Context 객체를 하나 생성하세요
• ContactEditor 컴포넌트가 Context 객체로부터 onCreateContact 함수를 공급받도록 수정하세요
• ContactList 컴포넌트가 Context 객체로부터 contacts State를 공급받도록 수정하세요
  • 이 컴포넌트에서 Props로 공급받던 onRemoveContact함수는 이제 더이상 필요하지 않습니다.
• ContactItem 컴포넌트가 Context 객체로부터 onRemoveContact 함수를 공급받도록 수정하세요

답안

// App.jsx

export const ContactsContext = createContext();
export const DispatchContext = createContext();

// ...

const memoizedDispatch = useMemo(() => {
  return { onAdd, onRemove };
}, [onAdd, onRemove]);

return (
  <ContactsContext.Provider value={contacts}>
    <DispatchContext.Provider value={memoizedDispatch}>
      <ContactEditor />
      <ContactList />
    </DispatchContext.Provider>
  </ContactsContext.Provider>
)

// ContactEditor.jsx

const { onAdd } = useContext(DispatchContext);
// ...

// ContactList.jsx

const { onRemove } = useContext(DispatchContext);
const contacts = useContext(ContactsContext);

return (
  // ...
  <ContactItem />
)

// ContactItem.jsx

const { onRemove } = useContext(DispatchContext);
// ...