원티드 #POB 4일차

이전 글을 다시 확인했을 보니, 내코드와 다른사람 코드가 구분이 되지 않아 가독성이 매우 떨어진다는걸 알았다.
코드를 구분할 때 내가 짠 코드는 직접 입력하고, 다른 곳에서 본 예제 코드는 링크와 함께 캡쳐본을 올려 구분하고자 한다.

검색 기능 구현하기

(완성된 모습)

검색 기능은 구현하는데 문제가 없었다.
map을 돌리기 전에 filter를 먼저 적용하면 간단하다!

 const [isActive, setIsActive] = useState(false)
 const [value, setValue] = useState('')
 
  const handleSearch = () => {
    setIsActive(!isActive)
  }

  const handleInputText = (e) => {
    setValue(e.currentTarget.value)
  }
  
 {todoList
            .filter((val) => {
              if (value === '') {
                return val
              }
              if (val.title.toLowerCase().includes(value.toLowerCase())) {
                return val.title
              }
              return null
            })
            .map((todo) => (
              <li key={`todo-${todo.id}`} className={styles.task}>
                <div className={styles.checkboxWrapper}>
                  <input type='checkbox' checked={todo.done} data-id={todo.id} onChange={handleChange} />
                  <CheckIcon />
                </div>
                <p className={classNames(styles.title, { [styles.done]: todo.done })}>{todo.title}</p>
                <span className={styles.deadLine}>{dDayHandler(todo.deadLine)}</span>
              </li>
            ))}

4회차 후기

오늘 뭐했어요? 시간이 너무 빨리 가