Growth Log : by dpwls

Appearance

0727 ​

Clone coding ​

Buy? Purchase? ​

이때까지 구매와 관련 된 컴포넌트나 훅명을 다 purchase로 썼는데
가만 생각하니까 Buy라는 단어도 존재하지 않는가
심지어 구매 관련 handle 함수는 Buy라고 적고있었다
이 프로젝트에선 Buy를 사용하는게 좋을까, Purchase를 사용하는게 좋을까?

  • Buy
    • 거래를 시작하는 느낌, 간단한 거래
  • Purchase
    • Buy보단 공식적인 구매 절차, 형식적이고 완전한 과정

상품 상세 페이지든 장바구니 페이지든간에
상품을 구매하기 위한 프로세스를 시작하는 단계임
고로 Purchase를 Buy로 수정

Tanstack form VS react hook form ​

저번 RealWorld 플젝 때 둘의 차이에 대해 잠깐 알아보긴 했다만, 지금 제대로 알고있는 상태가 아닌 것 같아서..

  • tanstack form이든, react hook form이든간에 왜 필요한가?

    • 비제어 컴포넌트 방식으로 불필요한 리렌더링을 최소화할 수 있다
      • 비제어 컴포넌트 방식이 뭔데?
      • 일반적인 React는 제어 컴포넌트 방식이라 React state가 값을 제어해서 매번 state가 업데이트된다.
      • 근데 react hook form을 쓰면 DOM이 값을 직접 관리한다. 그래서 React state가 없다. (여기서 중요한 점이 tanstack form은 제어 컴포넌트 방식이다. 이는 뒤에서 다시 설명)
    • 복잡한 폼 상태를 쉽게 관리할 수 있다
      • 복잡한 폼이 대체 뭐고, 얼만큼 쉽게 관리할 수 있는데?
        • 복잡한 폼이란 동적 필드나, 조건부 필드 표시 등을 의미한다.
        • 동적 필드 먼저 생각해보자. 내가 패키지 여행 사이트를 만들고 있어서 여행객 정보를 입력할 수 있는 폼을 만들고 있는데, 여행객을 한 명만 적을 수도 있고 같이 갈 일행 수 만큼 마음껏 입력할 수 있다고 가정하자. 근데 이 때 일반 react를 쓴다면 한 명의 정보만 추가하는데 다른 여행객의 정보까지 다같이 리렌더링 된다.
        • 다음으로 조건부 필드는 올리브영에서 화장품을 시키는데 오늘 드림이 있고 픽업이 있고 배송이 있고 이렇게 다양하게 있지 않는가 이 때 오늘 드림을 누르면 배송지와 배달 시간이 나오고, 픽업을 누르면 매장 정보가 나와야하고, 배송을 누르면 배송지를 입력해야 되는데 이러한 조건을 다 일일이 처리해야된다.
        • 이외에도 멀티 스탭 폼이나 실시간 계산이 필요한 폼 등을 복잡한 폼이라 한다.
        • 왜 위와 같은 것들을 복잡한 폼이라고 부르는가?
          • 리렌더링도 중요한 문제지만, 에러 관리도 각 필드마다 따로 따로 관리해야되고, 검증 로직도 복잡해지기 때문이다.

  • react hook form은 무엇인가?

    • 앞서 말한것들을 간편하게 쓸 수 있게 해주는 라이브러리다.

  • tanstack form은 react hook form이랑 뭔 차인가?

    • tanstack form은 제어 컴포넌트다
      • 아니 그럼 얘는 제어 컴포넌트면서 어떻게 리렌더링을 최소화하는가?
      • useFieldValue를 이용해 selective subscription으로 리렌더링을 최소화한다.
    • 타입 안정성
      • 얼만큼 차이가 나는데?
        • react hook form은 컴파일 시점엔 타입 오류를 모르는데, tanstack form은 컴파일 시점에서부터 타입이 체크된다.
        • tanstack form은 어떻게 컴파일 시점에서부터 타입이 체크 될 수 있는건데?
          • react hook form은 제네릭으로 타입을 따로 선언해서 사용해야 되는데
          • tanstack form은 defaultValues에서 타입을 자동 추론한다
          • 그래서 컴파일 시점에서부터 타입을 체크할 수 있다.

  • 그래서, 해당 플젝에선 뭘 쓰는게 좋을까?

    • 먼저 관리되고 있는 폼이 몇 개 인가?
      • product quantity와 option을 select하고 있기에 총 2개다. 그래서 리렌더링 문제는 발생하지 않을거다. 애초에 옵션을 다른걸 고르면 가격 등 전체가 리렌더링 되는게 맞으니까.
      • 그러면 그냥 라이브러리 안 쓰고 일반 form을 사용해도 되지 않았을까?
      • 단순해보이지만 옵션별로 가격도 계산해야 되고 max purchase에 대한 검증도 해야되기에 react hook form을 사용했다.
    • 만약 일반 form을 썼으면 어떻게 됐을건데?
      • 현재는 그냥 useWatch를 활용해 option과 quantity의 변경 상태를 추적하고 있지만, 일반 form을 사용했더라면 useState 쓰고, 하위 컴포넌트로 props 전달하고, 직접 상태 동기화도 해야됐을거다.

  • 참고 자료