[TIL] Day 24 TodoList 만들며 발생한 모든 오류들

2023.11.07 화

 

리빌딩한 파일을 토대로 추가 작성 필요

ver1 ~ ver4 타임어택과 리팩터링을 진행하면서 수많은 오류들을 만났다.

이를 기록하고 어느 부분에서 모르는지 체크해볼 수 있었다.

 

TodoList를 리빌링 해보면서 온갖 오류들을 다 만났다.

처음에 작성했을 때와는 또 다른 부분에서 막혔던 것도 있고, 동일한 부분에서 또 막힌 부분도 있었다.

다음에 같은 오류를 만났을 때 대처하기 위해서 정리해보려고 한다.

 

컴포넌트 jsx 파일 이름 변경시 오류

newTodo []

import react-uuid / uuid 차이

 

 

 

▶컴포넌트 앞에 대문자 안붙여서 변경시 오류

 

자주 발생하는 상황 : 컴포넌트 jsx파일을 생성할 때 파일이름의 첫글자를 소문자에서 대문자로 바꿔야하는 경우. 즉, 파일 이름을 변경해야하는 경우. yarn start로 서버도 켜져있는 경우

오류 상황 : 파일이름과 컴포넌트 import도 변경 했는데 오류가 발생

해결 방법
1. 보통의 경우 import 선언한 파일에서 저장을 진행하지 않아서
2. import 경로가 잘 못 돼서
3. jsx가 사용되는 <Input/> 부분에서 다른 단어가 사용되었을 경우

// jsx파일 이름 변경 후 import 선언한 파일 저장 진행

 

 

// 경로에서 파일명이 없을 때 index를 default로 찾아간다
import './App.css';
import React, { useState } from 'react';
import uuid from "react-uuid"

 

 

▶
// 오류 : {}를 감싸는 [] 오타
    const newTodo = {
        id: uuid(),
        title: title,
        contents: contents,
        isDone: false,
      };

    setTodo([...todo, newTodo]);

 

 

 

▶

{/* 기본적으로 form태그 안의 button은 submit으로 설정. 그러나 type을 명확하게 명시해주는 것이 협업에 좋다.
          type="button"으로 설정한다면 엔터 작성 시 작동을 막을 수 있다. */}
        <button onClick={addClickHandler}>추가하기</button>

 

 

 

▶

  // isDone 값 변경 안됨 => if문 안에 매개변수에 다른 값이 들어갔었다.
  const doneHandler = (todo) => {
    const doneTodo = todos.map(item => {
      // todo값은 위에 map에서 내려온 매개변수
      if (item.id === todo.id) {
        return {
          ...item,
          isDone: !item.isDone,
        }
      } else {
        return item;
      }
    })
    setTodos(doneTodo)
  }

// useState 값이 배열이기에 todos로 명명해주는 것이 오해의 소지를 줄일 수 있다
  const [todo, setTodo] = useState([]);

 

 

 

 

 

pro tips

 

CSS 모든요소에 적용
* {
}

props 대신 prev
이전 값을 가져올 수 있다


git copilot

 

 

onkeyup={handleKeyUp}

const handleKeyUp = (e) => {

  if (e.key === "Enter") handleClick();

};

 

onkeydown

onkeyup

onkeyPress