[우테코] 페이먼츠 미션 - 1단계 피드백 정리

1단계 회고

우테코 레벨 2가 시작되었다!
레벨 2부터는 리액트를 활용해 미션을 진행한다.
사용 경험이 많지 않은 리액트였기에, 이번 미션에서 페어의 도움을 많이 받았다. (호프와 해피코딩😆)

이번 미션을 진행하면서, 가장 중점에 둔 것은 상태관리와 컴포넌트 분리이다.

컴포넌트 분리

컴포넌트 분리의 경우, 미션을 시작하자마자 페어와 함께 고민한 부분이다.
컴포넌트의 분리 기준은 어디에 두어야 하는가...🤔

컴포넌트의 사전적 정의는 특정한 기능을 수행하는 작은 기능적 단위이지만 리액트 인 액션 이라는 책에서는 더욱 큰 것의 일부라는 추상적인 단어로 컴포넌트를 정의한다. 같은 컴포넌트 이지만 리액트에서의 컴포넌트는 조금 의미가 다른 것 처럼 느껴졌다.

게다가 수업시간때에, 컴포넌트를 버튼 단위까지도 나눌 수 있다는 말을 듣고 더 고민이 되었다

기능별로 나눠야 할 것인지, UI 적 요소로 나눠야 하는지🤔🤔🤔

컴포넌트 분리의 경험이 많지 않았던 나와 페어가 선택한 길은, 나눌 수 있을 만큼 나눠보자!! 였다.

해당 미션의 경우, 피그마를 통해서 구현해야할 대상이 그려져 있었기 때문에 UI 단위로 분리하여서 생각하기도 쉬었고, 분리해보는 경험도 나쁘지 않다고 판단했기 때문이다.

...

그 결과, 패스워드의 스타일적 부분인 점 까지 나눠버렸다.

최종적으로 나눠진 결과는 아래와 같다.

(input , label 등등 나눌 수 있는 건 다 나눴다)

이렇게 세세 하게 나눠 본 후 느낀 점은 생각 보다는 나쁘지 않았다 였다.
세세하게 나누니, 은근히 재사용하기 편하였기 때문이다.

물론, 그저 스타일링 요소인 점 컴포넌트 까지 나눌 필요가 있었냐? 라고 묻는다면...?
prop drilling은...?

😅

이렇게 까지 세세하게 나누고, 기능을 구현하다 보니 props drilling은 큰 문제였다.
휴멘틱 에러가 이렇게 발생하는 구나를 느낄 정도였다.

props들이 수정될때에, props를 할아버지컴포넌트에서 부터 시작해서, 자식 손자 컴포넌트까지 넘겨주어야 한는데 이것이 은근 까다로웠다.
자칫 하면, props들을 빼먹거나 잘못 넘겨주기 십상이였다. 둘이서 같이 확인하는데도 몇 번이고 다시 수정해야 했었다.

현재는 한 페이지만 구현했고, 구현한 기능도 복잡하지 않았는데도 이 정도이면 실제 서비스를 개발할때에는 무리가 많이 가는 구조라고 생각했다.

상태값 관리

상태값의 경우, 컴포넌트 분리를 하고 나서 상태값을 나누다 보니 자연스럽게 나눠진 컴포넌트에 따라서 상태를 정의한 것 같다.

예를 들어, 패스워드의 경우

input 컴포넌트 4가지로 나눠져 있다.
그래서, 해당 input 컴포넌트 하나 하나 분리해서 props를 넘겨주어야 했다.

추가적으로, 상태를 객체로 묶어서 관리해 버리면, 1번 input만 변하는 데도 4번 input 까지 새롭게 렌더링 되기 때문에 객체를 사용하지 않고 다 분리해서 상태를 관리하기로 했다.

그 결과, password의 경우

const [firstCardNumber, isFirstCardNumberError, onChangeFirstCardNumber] =
    useInputValue({ validation: checkNumberOnly });
  const [secondCardNumber, isSecondCardNumberError, onChangeSecondCardNumber] =
    useInputValue({ validation: checkNumberOnly });
  const [thirdCardNumber, isThirdCardNumberError, onChangeThirdCardNumber] =
    useInputValue({ validation: checkNumberOnly });
  const [fourthCardNumber, isFourthCardNumberError, onChangeFourthCardNumber] =
    useInputValue({ validation: checkNumberOnly });

위와 같이 4가지로 나눠서 관리되게 되었다. (useInputValue의 경우 커스텀 훅이다)

이렇게 나눠서 상태를 관리했을 때에 잘게 나눠진 컴포넌트들에 넣기에는 편리했다.

문제는,
바로 카드 인풋 폼들에 입력된 값들이 모두 유효할 때에 다음 버튼이 화면 상에 나오도록 기능을 추가할때 발생했다.

컴포넌트 별로 상태를 나눴기에, 상태도 많았고 그 결과 많이? 복잡한 로직이 나오고 말았다.

useEffect(() => {
    setIsValidatedForm(
      !isFirstCardNumberError &&
        !isSecondCardNumberError &&
        !isThirdCardNumberError &&
        !isFourthCardNumberError &&
        !isExpiredMonthError &&
        !isExpiredYearError &&
        !isOwnerNameError &&
        !isSecureCodeError &&
        !isFirstPasswordError &&
        !isSecondPasswordError
    );
  });

이렇게 되고 보니, 관련있는 상태끼리는 묶어서 객체나 배열로 관리했어야 하지 않았나 생각이 들었다. 하지만 당장 고치기에는 마감시간이 얼마 남지 않아 눈물을 머금고 제출해야 했다.🥲

리팩토링을 하면서 아마 배열로 수정을 해야할 것 같다

Story Book

솔직히 말해서, 이번 미션을 통해서 스토리북을 처음 접해보았다. 😱

그렇지만 다행히, 페어가 스토리북을 사용해본 경험이 있어서 페어의 도움으로 쉽게 진행 할 수 있었다:)

스토리 북은 UI 컴포넌트를 애플리케이션 외부의 독립적 환경에서 개발하기 쉽게 도움을 줄 수 있는 테스트 도구이다.

이번 미션에서의 경우 피그마로 주어진 디자인을 토대로 컴포넌트를 만든 후 App.js등에 넣어 실제로 웹페이지에 띄워보지 않고 스토리북을 바로 만들어 완성된 컴포넌트 디자인을 확인했다.

컴포넌트 디자인 하기 -> 스토리북 제작하기

해당 과정을 계속해서 거치고 하나로 묶을 컴포넌트에서도 (위의 예시로 들면, Card Number) 스토리북으로 확인하는 방식으로 모든 컴포넌트를 만든 후에
최종 컴포넌트에 import 하여 실제 화면에 띄우는 방식으로 개발을 진행하였다.

해당 방식대로 진행하니, 바로바로 디자인이 어떻게 구현되었는지 확인할 수 있어서 편리했다.
무엇보다, props를 story book에서 임시로 정하여 전달 할 수 있었는데 이는 실제 상태 관리 코드를 구현하지 않고도 상태에 따른 디자인을 확인할 수 있어서 좋았다.

프로토타입을 모두 구현하고 기능 구현 단계로 넘어가는데에 큰 도움을 주었다👍

Custom Hook

이것 역시, 해당 미션에서 처음 사용해보았다.
사용해본 훅이라곤 react에서 제공해주는 useEffect 정도...?

그럼에서 커스텀 훅을 해당 미션에서 사용하게 된 이유는 반복되는 작업이 많았기 때문이다.

const useInputValue = ({ validation }) => {
  const [value, setValue] = useState("");
  const [isError, setError] = useState(false);

  const onChangeValue = ({ target }) => {
    setValue(target.value);
    if (validation && !validation(target.value)) {
      setError(true);
      return;
    }
    setError(false);
  };

  return [value, isError, onChangeValue];
};

이것이 이번에 구현한 커스텀 훅이다.

위에서 보면, 값이 유효하지 않은 경우에 해당 값이 에러라는 것을 표시해주는 상태값을 설정해주어야하고 추가적으로 value 값도 설정 해주어야 한다.

해당 과정을 커스텀 훅을 사용하지 않고 useState를 활용해서 했다면, 반복되는 코드가 이어져 상태를 관리하는 곳의 코드 양이 방대해지고 가독성이 떨어질 수 있다.
그래서 이번에는 커스텀 훅을 사용하게 되었다.