[럼카] 2주차 1번째 PR

[yongseongjeon]

에드님 안녕하세요.

리뷰 해주셔서 감사합니다.

현재 금액 충전 기능을 추가는 하였으나 개인적으로 코드의 구조가 맘에 들지 않아 리팩토링을 진행중입니다.

데모 페이지입니다.

진행 상황

• 2022-05-17
• 2022-05-18
• 유저는 지갑에 있는 돈을 자판기에 넣을 수 있다. yongseongjeon/fe-vm#5
  • 금액 버튼을 클릭하면 자판기에 금액이 추가되고 돈의 갯수는 줄어든다.
  • 금액 버튼을 클릭했을 때 돈의 갯수가 0개 이하면 관련 에러 메세지를 띄운다.
  • 금액(10원~10,000원)을 입력하면 진행화면에 금액이 표시된다.
  • 동전/지폐의 갯수와 일치하지 않는 금액이 입력되면 관련 메세지를 띄우고 가장 가까운 금액으로 자동보정되어 입력된다.
• 유저는 상품을 선택해서 받을 수 있다. yongseongjeon/fe-vm#6
  • 투입된 금액이 만족되면 구매할 수 있는 상품의 테두리 색상이 다른 색으로 변한다.
  • 상품이 없으면 품절 메세지를 띄우고 상품을 선택할 수 없다.
  • 상품을 클릭하면 상품이 2초 뒤에 배출된다.

[sungik-choi]

수고하셨습니다! 코드가 점점 깔끔해지시는 거 같아요. 구현하신 부분도 잘 동작하는 거 같습니다.
이슈 정리해주시는 거, 커밋 나눠주시는 거 정말 좋네요 👍

다음 PR에선 기능도 좀 더 추가되면 좋을 거 같습니다! 구현하면서 느낀 고민들도 PR에 더 적어주셔도 좋고요.

[sungik-choi]

Suggested change

	[],
	[curMoney, handleInputMode],

• 의존성 배열에 콜백이 참조하는 값들을 모두 명시해주세요.
  (참고: https://ko.reactjs.org/docs/hooks-reference.html#usecallback)
• 여기서 useCallback을 사용하신 이유가 무엇인지 궁금하네요!

[yongseongjeon]

useCallback을 사용하기 이전에는 다음과 같이 컴포넌트가 중첩된 구조를 가졌습니다.

function ControlPanel() {
  function ModifiableInput() {
    return <div />;
  }
  function UnmodifiableInput() {
    return <div />;
  }

  return (
    <div>
      {isInputMode ? <ModifiableInput /> : <UnmodifiableInput />}
    </div>
  );
}

그래서 react/no-unstable-nested-components 관련 문서를 찾아보니

1. 컴포넌트를 밖으로 분리
2. useCallback을 활용해 메모이제이션해서 사용

을 통해서 중첩된 구조에 대한 문제를 해결할 수 있다고 이해했고, 그 중 2번을 선택해서 해결해보고 싶었습니다.

원래 <ModifiableInput /> 컴포넌트도 useCallback을 활용하고 싶었지만 상태가 변할때마다 focus가 사라지는 이슈때문에 컴포넌트를 밖으로 분리했습니다.

focus 사라지는 이슈 관련 영상입니다. (스크롤 조금만 내려주시면 관련 영상이 있습니다.)

2번 이유를 선택했던 이유는 <ControlPanel /> 에서만 <ModifiableInput />, <UnModifiableInput /> 를 사용하기 때문에 해당 컴포넌트 내부에서 정의하고 싶었습니다. 또한 components 하위에 외부 컴포넌트로 분리하게 된다면 다른 컴포넌트에서 사용될 수 있는 여지를 줄 것 같다고 생각했습니다.

그런데 말씀해주셔서 다시 보니 <ModifiableInput />, <UnModifiableInput /> 두 컴포넌트가 1, 2번을 혼용해서 사용하고 있어서 코드의 일관성이 떨어져 보이는 면도 있는 것 같습니다.

[sungik-choi]

useCallback 으로 함수형 컴포넌트를 메모이제이션하려는 건 안티패턴으로 보여요. 또한 useCallback 은 함수를 메모이제이션하기때문에 함수의 재생성을 막을 뿐이지, 함수의 결과값을 메모이제이션하지 않아서 메모이제이션의 의미도 크지 않아 보입니다.

만들어주신 getUnmodifiableInput 함수는 결국 리액트 함수형 컴포넌트로 치환할 수 있어요. 컴포넌트(정확히는 함수형 컴포넌트의 결과값)를 메모이제이션하고 싶으신거라면, React.memo 를 한 번 공부해보시면 좋을 거 같습니다!

[sungik-choi]

👍 훨씬 깔끔해졌네요

[sungik-choi]

원래 input 엘리먼트라(styled.input), as="input" 은 불필요해보이네요.

[sungik-choi]

인덱스 대신 코인 금액으로 비교하는 편이 더 직관적이어서 좋지 않을까요?

[yongseongjeon]

왜 인덱스로 비교했는지 모르겠을 정도로 코인 금액으로 비교하는 것이 훨씬 더 직관적이고 좋네요..! 감사합니다.

아래와 같이 수정했습니다.

function updateCoinCnt(coin) {
  const isTargetCoin = AMOUNT === coin.AMOUNT;
  if (isTargetCoin) {
    return { AMOUNT, CNT: CNT - 1 };
  }
  return coin;
}