[6/24 TIL] react 1차 과제 진행 중 생긴 질문과 답변

이번주 과제 - 리액트로 todoList 만들기

git 주소

과제를 마감하고 제출까지 완료했다.
input 값이 초기화되는 걸 구현을 안해서 해주고, todolist content의 정렬도 다시 했다.
2차 과제를 진행하면서 1차 때 미흡했던 부분들을 수정해야겠다.

1차 과제 진행하면서 생긴 질문과 답변

1. 컴포넌트를 나누는 기준을 어떻게 잡아야 할까요. 작은 단위들로 다 나누자니 props drilling이 생기는 것 같아 감을 잡기 어려워요. + 만든 기능(hook)들이 App.jsx에만 쌓이게 되는 데 이 방향이 맞는 걸까요?
   -> 받은 답변
   리덕스를 사용하면 데이터를 전역으로 내려줄 수 있기 때문에 1차 과제에서는 drilling 현상이 생겨도 괜찮으니 일단은 역할에 맞게 나눠주는 것에 집중하는 게 좋습니다. 나중에 리덕스도 배우고 리팩토링도 하면서 다시 구조가 바뀌게 됩니다.

• 설명하시면서 input박스가 담긴 컴포넌트 부분을 보여주셨다. App.js로 부터 props를 넘겨 받아서 submit기능을 컴포넌트 기능에 맞게 넣어주신 걸 보여주셨다.
  나는 드릴링 현상이 신경쓰여서 소극적으로 나눴는데 수정해봐야겠다.

2. input태그를 form태그로 감싸니까 계속 새로고침이 되는데 어떻게 해결하셨나요?
   -> 받은 답변
   form태그는 서밋할때 리랜더링하기 때문에 일시적으로 멈춰주는 작업을 해줘야합니다.

• 보여주셨던 코드 memo

const onSubmit = (event) => {
  event.preventDefault();
  addTodoHandler(title, content);
}

추가 공부

• preventDefault 란?
  a,submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행된다.
  preventDefault()는 이런 동작을 일시적으로 멈춰줄 수 있다.
  form 안에 submit은 작동하면서 새로고침은 동작하지 않게 하고 싶은 경우 사용할 수있다.

• stopPropagation()
  부모 태그로 이벤트가 전파되는 것을 막아준다.