이노캠 8주차(토)-강의 듣는 중 내용 정리

📌강의 들으며 간단 정리

원장님 강의를 들으면서 알려주시는 내용들 중에 헷갈릴 것 같은 내용 정리함.

✅form 태그 새로고침 막을때

form 태그는 버튼을 누르면 새로 고침하는 성질이 있기 때문에

   <form
          onSubmit={(e) => {
            e.preventDefault();
          }}
        >

로 새로 고침 막아주기.
또한 폼 태그 안의 버튼은 submit으로 간주되기 때문에 onClick을 안 넣어주고 form에만 넣어줘도 ok다.

✅input 값 useState 작성시

<input
type="text"
value={inputValue.title}
onChange={(e) => {
setInputValue({
title: e.target.value,
});}}
/>

위에서 초기값을 객체 형태로 만들어 줘서 e.target.value도 맞춰줌 이렇게 쓰는 이유는 useState를

const [inputValue, setInputValue] = useState({
title: "",
});

로 정해놨기 때문이다. 삭제시

<button onClick={onDeleteButtononClickHandler(item.id)}>

로 해버리면 최초에 렌더링 과정에서 이미 함수를 실행해버리기 때문에 꼭꼭 화살표 함수!!로 한번 함수로 감싸주기

✅수정 내용 새로고침없이 바로 보이게 하면 안되는 이유?

수정함수를 만들때

const onUpdateButtononClickHandler = async () => {
    api.patch(`/todos/${targetId}`, {
      title: contents,
    });
setTodos(
  todos.map((item) => {
  if (item.id === targetId) {
  return { ...item, title: contents };
  } else {
  return item;
  }
  })
);
};

이렇게 작성하니 새로고침이 안됐을때 업뎃이 안됐다. item.id와 targetId의 형이 달라서 그래서 일치 연산자===가 아니라 동등연산자==로 써주니 됐다.

✅추가함수 만들었을때 추가한게 바로 보이는데 id가 안 보이는 이유?

const onSUbmitHandler = async (id) => {
axios.post("http://localhost:3001/todos", inputValue);
setTodos([...todos, inputValue]);
};

이렇게 코드를 짰을때 db에서는 바로 id가 생겨나는데 state에서는 그 값을 알수없기 때문임. 그때는 다시 db를 읽어오는 방법이 더 좋을 수 있다.

const onSUbmitHandler = async (id) => {
axios.post("http://localhost:3001/todos", inputValue);
fetchTodos();
};

이렇게 써주기!

✍️ 느낀점

강의를 빨리 들어야 되는데 진도가 느리다.😭😭 S.A를 작성 후 빨리 프로젝트를 시작하고 싶은데 뭘 모르는 상태에서 만들다가 스노우볼같은 문제가 만들어질 것 같아서 다 듣고 시작하려고 한다.

잠은 죽어서 자자...🧟‍♀️🧟‍♀️