내배캠 TIL 2022.12.12

redux 이용하여 TodoList 만들기

강의보면서 혼자 폴더구조를 어떻게 해야하지 하고 고민하고 이것저것 만들고 있었는데

팀원분께서 예시에서 소스보기 하면 폴더 구조 확인할 수 있다고 하셔서 참고해서 만들었다. 

 

후발대 코드 따라치기 숙제를 했다.

숙제를 하기위해서 코드를 github에서 받아서 사용하려고 했는데 yarn start 했더니 스트립트가 없다는 오류가 났다.

검색해보니까 다운받을 폴더에 yarn이 없어서 그렇다는 것을 알았다. 

yarn install 하여 다운받고 나니까 문제 해결.

yarn install

 

팀원들과 이야기하여 input Box 컴포넌트 분리할 때 왜 오류가 났는지 발견했다

구조분해 할당을 해오면서 키워드들을 담아오는데 중괄호를 빼먹어서 오류가 났던 것 이었다.!!

 

오류났을 때

const InputBox = (
  title,
  body,
  onChangeTitleHandler,
  onChangeBodyHandler,
  addToDo,
) => {
  return....}

오류 해결 후

const InputBox = ({
  title,
  body,
  onChangeTitleHandler,
  onChangeBodyHandler,
  addToDo,
}) => {
  return....}

 

 

 

 

후발대 강의를 듣고나서

form안에 있는 버튼을 클릭하면 onSubmit이 된다는 사실을 알고 코드를 수정해보았다.

근데 수정을 하고 나니까 자동으로 새로고침하기 시작해서 

addTodo 함수에 event.preventDefault(); 를 넣어주었다.

 

onClick으로 썼던 코드

const InputBox = ({
  title,
  body,
  onChangeTitleHandler,
  onChangeBodyHandler,
  addToDo,
}) => {
  return (
    <div className="add-form">
      <div className="input-group">
        <label htmlFor="title">제목</label>
        <input
          value={title}
          onChange={onChangeTitleHandler}
          id="title"
          type="text"
        />
        <label htmlFor="context">내용</label>
        <input
          value={body}
          onChange={onChangeBodyHandler}
          id="context"
          type="text"
        />
      </div>
      <button className="add-btn" onClick={addToDo}>
        추가
      </button>
    </div>
  );
};

 

 

onSubmit으로 코드 수정 후

const InputBox = ({
  title,
  body,
  onChangeTitleHandler,
  onChangeBodyHandler,
  addToDo,
}) => {
  return (
    <form onSubmit={addToDo} className="add-form">
      <div className="input-group">
        <label htmlFor="title">제목</label>
        <input
          value={title}
          onChange={onChangeTitleHandler}
          id="title"
          type="text"
        />
        <label htmlFor="context">내용</label>
        <input
          value={body}
          onChange={onChangeBodyHandler}
          id="context"
          type="text"
        />
      </div>
      <button className="add-btn">추가</button>
    </form>
  );
};