10.29.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-3챕터리뷰

[ 새롭게 알게된 것 ]

---

1. Date 함수를 활용해 오늘날짜와 요일을 표기할 수 있음

---

사용법은 new Date(); 로 호출해주면됨.

연도, 달, 일자를 변수에 담고 싶을땐 아래와 같이 toLocaleDateString()을 이용해주면 됨.

  const today = new Date();
  const dateString = today.toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
  const dayName = today.toLocaleDateString('ko-KR', { weekday: 'long' });

---

 

 

2. 토글 및 삭제기능은 todoList가 아닌 todoItem에서 핸들링 해야됨을 알게됨

---

그래서 todoItem 컴포넌트에 아래와 같은 props를 넘겨주어야 함.

function TodoList() {
  const todos = useTodoState();

  return (
    <TodoListBlock>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          id={todo.id}
          text={todo.text}
          done={todo.done}
        />
      ))}
    </TodoListBlock>
  );

---

 

3. 투두리스트 삭제나 추가 같은 특정상황에 dispatch를 사용하면 됨을 알게됨

---

단, 리렌더링 방지를 위해서 마지막에 export할때 React.memo()로 해당 컴포넌트를 감싸주는게 좋음

---