4. Todo List 컴포넌트 기능 구현(1)

부모 컴포넌트 App()

[ App(  ) 밖에서 선언된 것 => 목데이터(임시데이터) ]

const mockTodo = [
  {
    id: 0,
    isDone: false,
    content: "React 공부하기",
    createdDate: new Date().getTime(),
  },
  {
    id: 1,
    isDone: false,
    content: "프로젝트 만들기",
    createdDate: new Date().getTime(),
  },
  {
    id: 2,
    isDone: false,
    content: "Tstory 정리하기",
    createdDate: new Date().getTime(),
  }
]

 

[ App(  ) 안에서 선언된 것들  => hook(useState, useRef),  컴포넌트에 매개변수로 전달할 event]

const [todo, setTodo] = useState(mockTodo);	<임시데이터를 todo의 기본값으로 지정함> -state 변수 todo의 기본값을 빈 배열로 초기화
const idRef = useRef(3);	<id 값을 참조하여 해당id가 존재하는 요소를 관리해주는 useRef( )> -목데이터에서 만든 아이템아이디가 0~2까지 이므로 새로 생성되는 아이템은 3이 기본값
const onCreate = (content) => {     const newItem = {       id: idRef.current,         isDone: false,       content,       createdDate: new Date().getTime(),     };     setTodo([newItem], ...todo);     idRef.current += 1;   }	<추가 버튼을 눌렀을 때 할 일 아이템을 추가하는 함수 > -모든 아이템은 고유한 id를 가지게 된다. -사용자가 작성한 할 일 데이터를 받아 매개변수 content에 저장 -새 할 일 아이템 객체를 만들어 newItem에 저장 -추가된 아이템은 항상 배열의 0번 요소가 됨.
const onUpdate = (targetId) => {      setTodo(        todo.map((work) => {         if(work.id === targetId){            return {             ...work,             isDone: !work.isDone            }         } else { return work; }       })     )   }	<체크박스에 틱이 발생했을 때 호출하는 함수> -매개변수 targetId에 해당 아이템의 id를 저장한다. -해당 아이템의 id가 일치하는 컴포넌트의 id를 찾으면 isDone 프로퍼티 값을 토글한 새 배열을 만들어 인수로 전달
const onDelete = (targetId) => {     setTodo(todo.filter((work) => work.id !== targetId))   }	<삭제 버튼을 눌렀을 때 할 일 아이템을 삭제하는 함수 > -삭제버튼을 클릭했을 때 해당 id요소를 뺀 새 배열로 todo를 업데이트함으로써 대상 아이템을 삭제한다.

* Props Drilling : 리액트 컴포넌트는 바로 한 단계 아래의 자식 컴포넌트에만 데이터를 전달할 수 있어서 한 단계 이상 떨어져 있는 자식 컴포넌트에게 데이터를 전달하려면, 여러 컴포넌트를 거쳐 전달해야한다.

(이 구현방식은 좋은 방식이 아니라고 한다.)

 

[ App(  )에서 return 된 HTML ]

return (     <div className="App">       <Header />       <TodoEditor onCreate={onCreate} />       <TodoList todo={todo} onUpdate={onUpdate} />     </div>   ); }

-최상위 <div> 태그 안에 자식컴포넌트들을 배치하였다.   -TodoEditor 컴포넌트로 onCreate() 객체생성함수를 props로 전달한다. -TodoList 컴포넌트로 배열인 todo와 onUpdate()를 props로 전달한다.

*자바스크립트로 정의된 변수/함수들을 컴포넌트 안에서 사용할 때에는 중괄호 { }를 함께 사용한다.

 

[App.js]

function App() {
  const [todo, setTodo] = useState(mockTodo);
  const idRef = useRef(3);
  const onCreate = (content) => {
    const newItem = {
      id: idRef.current,  //모든 아이템은 고유한 id를 가지게 된다.
      isDone: false,
      content,
      createdDate: new Date().getTime(),
    };
    setTodo([newItem], ...todo);
    idRef.current += 1;
  }
  const onUpdate = (targetId) => {
    setTodo(
      todo.map((work) => {
        if(work.id === targetId){
          return {
            ...work,
            isDone: !work.isDone 
          }
        } else {
          return work;
        }
      })
    )
  }
  const onDelete = (targetId) => {
    setTodo(todo.filter((work) => work.id !== targetId))
  }

  return (
    <div className="App">
      <Header />
      <TodoEditor onCreate={onCreate} />
      <TodoList todo={todo} onUpdate={onUpdate} />
    </div>
  );
}