typescript interface property 변환하기, react-query mutate 파라미터 오류 해결, common 컴포넌트로 분리하기

typescript interface property를 optional로 변경하기

 

기존에 있던 form에서 에러 객체의 타입입니다.

어떤 input인지 예상할 수 있었기 때문에 따로 타입을 만들어 선언하면서 사용했습니다.

 

하지만 이렇게 사용을 해보니 form의 값을 저장하고 있는 value와 error에 새로운 키가 추가되었을 때 직접 type 선언한 부분을 찾아가 추가해줘야한다는 단점이 있었고 form을 사용하는 객체가 많아질수록 코드의 양이 늘어나게 되었습니다.

export type ErrorProps = {
  email?: string;
  password?: string;
  error?: string;
};

 

따라서 초기값에 따라 optional한 객체 타입을 만들어주는 유틸리티 타입이 필요했고 아래와 같이 변환하여 사용하였습니다.

export type ChangeTypeOfKeys<T> = {
  [key in keyof T]?: T[key];
};

ChangeTypeOfKeys<typeof initialValue>

 

ts를 쓰면서 느끼는 부분이 범용성이 높은 타입을 구현한다면 ts의 이점을 쉽게 가져갈 수 있다는 것을 항상 생각하게 됩니다.

typescript interface property를 optional property로 바꾸기

 

react-query mutate multi 파라미터 오류 해결

react-query라이브러리의 useMutation을 사용하던 도중 updateMutate에서 오류가 발생하게 되었는데 다음과 같습니다.

 

mutation을 정의한 부분에서 createTodo, deleteTodo 전부 mutation 관련한 오류가 발생하지 않았는데 updateTodo만 api 오류가 발생하였습니다.

그래서 혹시 파라미터 문제인가 싶어 파라미터의 value값을 제외하고 테스트해봤더니 문제가 없는걸 확인하고 react-query mutation parameter 관련하여 구글링을 하였습니다.

 

스택 오버플로우에서 확인할 수 있었고 파라미터가 2개 이상이라면 파라미터를 객체로 변환시켜야 했습니다.

Can't I put multiple data arguments in the react-query useMutation hook?

// mutation
 const { mutate: updateTodo } = useMutation(TodoAPI.updateTodo, {
	...options
    },
  });
  
  // axios
   updateTodo: async (id,value): Response<TodoDataResponse> => {
    const result = await instance.put(`/todos/${id}`, value);
    return result.data.data;
  }
  
  // mutate 호출
  updateTodo(id, todo);

 

따라서 위처럼 updateTodo에서 단순히 2개의 파라미터를 받는 것이 아닌 객체로 받도록 수정을 했고 단순히 타입을 추가해주니 잘 동작하게 되었습니다. 

//mutation 정의
  const { mutate: updateTodo } = useMutation(TodoAPI.updateTodo,{...options})

// axios
  updateTodo: async ({
    value,
    id,
  }: UpdateTodoType): Response<TodoDataResponse> => {
    const result = await instance.put(`/todos/${id}`, value);
    return result.data.data;
  },

// mutate 호출
  updateTodo({ id: todo.id, value: values });

 

 

common 폴더로 공통 컴포넌트 분리하기

사실 이건 중요한 부분은 아니지만 그래도 한번쯤은 고민해보고 싶어서 해봤고, 아직 정확히 나누진 않았지만 이렇게 하면 좋지 않을까 생각해서 나눠보게 되었습니다.

 

이번 프리온보딩 TodoApp을 만들면서 각 디자인이라던가 레이아웃이 전체적으로 다르지 않았기 때문에 이 정도면 지울만하다고 생각해서 나눴고 그럼에도 Form에 있어서 정확한 분리라던지, 조금 더 분리할만한데 구현을 못했다던지 하는 부분 등 구조에 있어서 분리하는데 많은 어려움을 느꼈다고 생각이 듭니다.