오늘까지 배운 내용 간단히 코드 정리

주요 내용 : 과제 + a(수정하기 기능)

수정이 모두 코드가 2개인 이유 : isDone 에서 갈리는 것을 생각 못 하고 상세페이지에서 만들지 않아 두 개씩 짰다. 여기서 나온 결론.. 설계를 잘하자.

1. action creator & reducer

실제 엑션 크리에이터에서 값을 변경할 수 있게 명령해주고 리듀서에서 실제로 값이 바뀌게 코드를 작성했다. 주석을 참고해서 기억해두도록 하자.

좀 새롭게 적용해본 것 : splice

(action creator)
export const updateTodo = (payload, title, body, isDone) => {
  return {
    type : UPDATE_TODOLIST,
    title, 
    body,
    isDone,
    id : payload,
  }
}

export const updateTodo2 = (payload, title2, body2, isDone) => {
  return {
    type : UPDATE_TODOLIST,
    title : title2, 
    body : body2,
    // 축약문 대신 풀어서 리듀서 공유
    isDone,
    id : payload,
  }
}

(reducer)

...
 case UPDATE_TODOLIST:
        console.log(action)
        let obj = {
                    id : uuidv4(),
                    title : action.title,
                    body : action.body,
                    isDone: action.isDone,
                  }
        // 임의의 obj 만들어서 splice에 집어넣는다.
                console.log(obj.title, obj.body, obj.isDone)
        return {
          ...state,
          todos : state.todos.map((todo, index, array) => {if(todo.id === action.id){
              return array.splice(index, 1, obj)
              // splice란? 을 잘 굄ㄴ해보면 나오는 코드
          }}),
          todos : state.todos
        }
  ...

2. 실제 컴포넌트 주요 코드

(dispathc 부분)
  const onUpdateHandler = (id, title, body, isDone) => {
    dispatch(updateTodo(id, title, body, isDone))
    // isDone까지 모두 받아야하므로
    setEditTodo(() => {
      return {...editTodo, title: "", body : "", isDone: ""}
    })
  }

  const onUpdateHandler2 = (id, title, body, isDone) => {
    dispatch(updateTodo2(id, title, body, isDone))
    setEditTodo2(() => {
      return {...editTodo2, title2: "", body2 : "", isDone2: ""}
    })
  }  

(jsx 파트)
<StUpdButton type="button" onClick={() => {onUpdateBtn(todo.id)}}>수정</StUpdButton>
          <StFormContainer>
            <StEditbox editBox={isEdited} key={editTodo.id}>
              <StInput type="text" name="title" value={editTodo.title || ""} onChange={(e)=>{setChangeHandler(e)}} placeholder="수정 제목을 입력하세요"></StInput>
              {/* 함수에서 값 받아오려면 위 아래 값이 같아야 한다.(e) */}
              <StInput type="text" name="body" value={editTodo.body || ""} onChange={(e)=>{setChangeHandler(e)}} placeholder="수정 내용을 입력하세요"></StInput>
              <StButton onClick={()=>{onUpdateHandler(todo.id, editTodo.title, editTodo.body, editTodo.isDone)}}>수정완료</StButton>
              {/* 아이디는 배열에서 찾을 아이디니까 넣은 것. 타이틀 바디는 수정하려고 쓴 인풋 값 받아온 것 */}

3. 아쉬운 점 :

값은 따로 변하지만 수정 버튼을 눌렀을 때 모든 칸에서 수정 칸이 열리는 것을 알 수 있다.

시도해본 것 :

• div 태그 줘보기
• id 값 연결시켜보려고 하기(진행중)
• 스타일드 컴포넌트 원복시키기(원래 인라인 스타일로)

결국 성공하지 못 했지만 의미있는 도전이었다. 애초에 상세보기에서 투두를 수정했으면 좋았을 법 했는데.. 설계가 얼마나 중요한지 다시금 깨달았다.