리액트 타임어택

이렇게 총 4개의 문제를 1시간 30분만에 풀어야했다.

 

1~3번까지는 복습을 한 내용이라 비교적 수월하게 했는데

4번문제 contextAPI는 아직 미흡한 부분이 많아서 시간내에 하지 못한채 제출을 했다.

 

1번문제는 화면에 투두리스트를 띄울 수 있는가? 라는 문제였고, map함수를 이용하여 간단하게 해결 가능했다.

          todos.map(todo => (

            <TodoItem

              key = {todo.id}

              todo = {todo}

              onDeleteTodoItem={()=>onDeleteTodoItem(todo.id)}

              onToggleTodoItem={()=>onToggleTodoItem(todo.id)}

            />

 

2번문제는 filter를 이용해서 삭제 버튼을 누른걸 삭제하고, map을 사용해 상태가 바뀌게끔 즉

  const onDeleteTodoItem = (id) => {

    const filterTodos = todos.filter(todo=>todo.id !== id)

    setTodos(filterTodos)

    // SECTION: 2-1번 문제

    // TODO: 투두 리스트 삭제

    // NOTE: filter 메서드를 사용하여 삭제할 아이템을 제외한 나머지 아이템만 반환 후 setTodos로 업데이트

    // HINT: `id`와 `todo.id`가 일치하지 않는 아이템만 반환

  };

  const onToggleTodoItem = (id) => {

    const completedTodos = todos.map(todo=>

     todo.id === id  ? {...todo, completed:!todo.completed}: todo

    )

    setTodos(completedTodos)

    // SECTION: 2-2번 문제

    // TODO: 투두 리스트 completed(완료) 상태를 토글

    // NOTE: map 메서드를 사용하여 특정 아이템의 completed 상태를 토글 후 setTodos로 업데이트

    // HINT: `id`와 `todo.id`가 일치하는 아이템의 completed 상태를 토글

  };

 

2-1 은 이런식으로 filter를 이용해 삭제버튼을 누를때 id의 값이 다른것만 반환후 setTodos로 업데이트가 되게끔

2-2 는 삼항연산자를 사용해서 누를때의 id값이 일치하면 completed의 값이 !(논리부정연산자)를 사용해서 true와 false가 바뀌게끔 하면 된다. 

 

useEffect(() => {

    if (sortOrder === "asc") {  

     

      const ascendingOrder = [...todos].sort((a, b)=>{

        return new Date(a.limit) - new Date(b.limit)})

      setTodos(ascendingOrder)

      // SECTION: 3-1번 문제

      // TODO: 투두 리스트 오름차순 정렬

      // NOTE: sort 메서드를 사용하여 `limit`을 기준으로 오름차순 정렬 후 setTodos로 업데이트

      // HINT: `new Date(todo.limit)`을 사용하여 정렬

      return;

    }else if(sortOrder === "desc"){  

      const descendingOrder =  [...todos].sort((a, b)=>{

        return new Date(b.limit) - new Date(a.limit)})

      setTodos(descendingOrder)

    // SECTION: 3-2번 문제

    // TODO: 투두 리스트 내림차순 정렬

    // NOTE: sort 메서드를 사용하여 `limit`을 기준으로 내림차순 정렬 후 setTodos로 업데이트

    // HINT: `new Date(todo.limit)`을 사용하여 정렬

  }

  }, [sortOrder]);

 

3-1은 sort메서드를 사용해서 오름차순정렬 하는 문제 hint에 나와있듯이 new Date(todo.limit)을 사용하라고 되있다.

그럼 이 limit이 뭔지 알아야하는데 

생성될때의 함수를 보면

 onSubmitTodo({

      id: crypto.randomUUID(),

      title,

      content,

      limit,

      completed: false,

    });

이런식으로 되있고 생성하는 폼을 보면

 <input type="date" name="limit" />

이런식으로 날짜를 정하는 input태그임을 알 수 있었다.

이 날짜를 오름차순 내림차순 하라는 문제옇고 그럼 sort메서드를 이용해서 하면 됐다.

4번은 아직 복습을 못했기때문에 다음에 하겠습니다.