Day 15 Mission

과제) 연락처 앱 만들기

이번 과제는 새로운 연락처 앱을 만드는 과제입니다.
아래 미션 소개 섹션에 안내되어 있는 순서에 따라 진행하세요.

미션 소개

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

요구사항

다음 요구사항을 만족하도록 연락처 앱을 완성하세요

1. 필수 요구사항

   • 새로운 연락처를 등록할 수 있습니다.
   • 등록된 연락처는 Contact List에 리스트 형태로 렌더링 됩니다.
   • 등록된 연락처를 삭제할 수 있습니다.
     
     

2. 보너스 요구사항 (선택사항)

   • 새로운 연락처를 추가하는 ContactEditor 컴포넌트에서 빈 입력을 방지하세요
   • 연락처 리스트를 저장할 때 useState대신 useReducer를 활용하세요

답안

빈 입력 방지

  const nameRef = useRef();
  const contactRef = useRef();

  const onSubmit = () => {
    // 빈 입력 포커싱
    if (state.name === "") {
      nameRef.current.focus();
      return;
    }

    if (state.contact === "") {
      contactRef.current.focus();
      return;
    }

    // 리스트 추가 로직...
  };

<div>
  <input value={state.name} ref={nameRef} ... />
  <input value={state.contact} ref={contactRef} ... />
</div>

useReducer 사용

function reducer(state, action) {
  switch (action.type) {
    case "ADD":
      return [...state, action.data];
    case "REMOVE":
      return state.filter((item) => item.id !== action.id);
  }
}

const [contacts, dispatch] = useReducer(reducer, []);

  // 연락처 등록
  const onAdd = (name, contact) => {
    dispatch({
      type: "ADD",
      data: {
        id: idRef.current++,
        name,
        contact,
      },
    });
  };

 // 연락처 삭제
  const onRemove = (id) => {
    dispatch({
      type: "REMOVE",
      id,
    });
  };