!241110 취준_라이브러리 살펴보기

미밍·2024년 11월 10일

취준

우당탕탕 취뽀

목록 보기

9/10

라이브러리는 많고 닥스를 열심히 보는 요즘 ...

리액트에서 쓸 수 있는 라이브러리를 최대한 많이 써보려고 노력 중이다.

회원가입 / 로그인 / 프로필 수정 => 간단한 사이트에 적용할 수 있는 라이브러리는 뭐가 있을지 살펴보기

디자인 기획부터 하고 시작했으면 좋았겠지만 시간이 부족했다. 🐱‍🐉다 그러는 거잖아요.

이번엔 색 정도의 컨셉을 가지고 꾸려나갈 예정이기 때문에 디자인 관련은 스킵하고 썼던 것과 고려했던 것 등등 말해보려고 한다.

1) 스키마 유효성 검사_ zod

Zod

가장 최근에 알게 된 라이브러리로 스키마 유효성 검사 라이브러리다

유사품으로 yup 가 있다.

솔직히 말하면 내가 보기엔 둘 다 아주 비슷해 보였는데, yup이 먼저 있었고 -> 이후 zod가 나왔다고 해서 최신 라이브러리를 쓰고 싶어서 zod를 선택했다.

일단 좋은 점 에러 메시지가 출력이 기가 막혀서 좋았다.

라이브러리를 안 쓰고 프로젝트를 한다든가 하는 수가 없다면 계속 쓰고 싶다. ts에 호환도 잘 되는 것 같다.

2) zustand, tanstackQuery(reactQuery)_상태 관리

이번엔 주스탠드랑 탄스택을 섞어서 썼는데, 사실 둘을 언제 어디서 써야 하는지 감이 전~~~혀 안 잡혔다. 주스탠드로 싹 만들어놓고 몇 가지만 탄스택으로 리팩토링 했을 정도.

주스탠드의 장점은 진짜. 쉬운 거. 나는 프롭스 드릴링을 정말 싫어하는데 상태 관리 라이브러리르 좋아하냐고 하면 그렇지도 않음 .... 👀 쪼오끔 헷갈리잖아요 ...

그래도 RTK 에서 넘어가면 주스탠드는 선녀다. F5 하면 싹~ 날라가지만 ... 이번엔 persist를 안 쓰려고 이거저거 했는데, 사실 과용이 된 것 같아서 고민. 나중에 리팩토링 하면 몇 가지는 삭제하지 않을까...

(*홈페이지 왕 귀여움...)

탄스택 쿼리는 원래 내가 워낙 좋아해서... 훅으로 만들고 쓰긴 썼는데 또 mutate 쓸 땐 살짝 버벅인다. 이상하게 탄스택 쿼리 닥스는 뭔가 많이 써있는데 진짜 뭔가 이상함......... 뭔가 불편한데 이유를 찾을 수가 없다. 닥스 고마운데 묘하게 딱 긁어주는 게 없다.

솔직히 말하면 클로드한테 가서 useMutation 예시 코드 달라고 하는 게 쉬울 지경... 이건 내가 보라고 긁은 클로드 예시 코드. 개인적으로 이런 느낌의 탄스택 쿼리 코드를 좋아하는데 괜찮을라나 모르겠다.

// API 호출 함수
const postTodo = async (newTodo: Todo) => {
  const response = await fetch('https://api.example.com/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(newTodo),
  });
  return response.json();
};

// 컴포넌트 내부
import { useMutation, useQueryClient } from '@tanstack/react-query';

function TodoComponent() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: (data) => {
      // 성공 시 todos 쿼리 무효화
      queryClient.invalidateQueries({ queryKey: ['todos'] });
      console.log('Todo created:', data);
    },
    onError: (error) => {
      // 에러 처리
      console.error('Error creating todo:', error);
    },
    onSettled: () => {
      // 성공/실패 상관없이 실행
      console.log('Mutation completed');
    }
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const newTodo = {
      id: Date.now(),
      title: 'New Todo',
      completed: false
    };

    mutation.mutate(newTodo);
  };

  return (
    <div>
      <button 
        onClick={handleSubmit}
        disabled={mutation.isPending}
      >
        {mutation.isPending ? 'Creating...' : 'Create Todo'}
      </button>

      {mutation.isError && (
        <div>An error occurred: {mutation.error.message}</div>
      )}
    </div>
  );
}

export default TodoComponent;