레벨2 - 페이먼츠 리뷰 피드백

 

1.  함수형 업데이트

기존 상태를 기반으로 업데이트하는 방식은 좋지 않다. 

리액트에서 상태 업데이트는 비동기적으로 일어날 수 있기 때문에 상태를 직접 참조하거나 이전 상태를 바로 사용하면 예상치 못한 결과를 초래할 수 있다. 

 

const addCardItem = (cardItem: CardItemInfo) => {
    const updatedCardList = [...cardList, cardItem];
    setCardList(updatedCardList);
  };

 

따라서 위의 방식보다는 아래의 함수형 업데이트 방식을 사용해 보자.

 

 const updateCardList = (cardItem: CardItemInfo) => {
    setCardList((prevCardList) => [cardItem, ...prevCardList]);
  };

 

2. key

key 값에 index를 그대로 사용하면 다른 컴포넌트 키와 겹쳐 렌더링에 문제가 생길 수 있다.

따라서 아래와 같은 형태로 key 값을 설정해 보자.

 

 <React.Fragment key={`card-number-input-${index}`}>

 

 

3. Array.prototype.at()

인덱스를 더할 때 사용한다. 

양수와 음수 모두 지정이 가능해서 더 안전하게 쓸 수 있다.

음수의 경우 배열의 뒤에서부터 요소에 접근할 수 있다.

또한, 인덱스가 배열의 범위를 벗어나는 경우에도 undefined만 반환하고 오류를 일으키지 않는다.

 

refs.at(inputIndex + 1).current?.focus();

 

+리뷰리뷰

1. Style Props

일반적으로, CSS-in-JS 진영에서는 Style props에 대한 prefix로 '$'를 권장하고 있다.

이를 통해 스타일에 필요한 props와 네이티브 속성의 Props를 구분할 수 있다.

 

<CardInfoWrapper $cardCompany={cardCompany}>

 

2. CTA 버튼

사용자에게 다음 행동에 대한 힌트를 주어서, 사용자의 반응을 유도하는 행위 혹은 요소를 CTA(Call to Action)라고 한다.

예로는 사용자가 404 페이지를 만났을 때, 홈으로 이동할 수 있는 버튼이 있다.

 

3. 모든 Props가 optional일 경우

type UnderlinedInputProps = {
  width?: string;
  name?: string;
  placeholder?: string;
};
const UnderlinedInput = ({ width, name, placeholder }: UnderlinedInputProps) => {

 

이렇게 사용하기보다는 아래처럼 사용하자.

 

type UnderlinedInputProps = {
  width: string;
  name: string;
  placeholder: string;
};
const UnderlinedInput = ({ width, name, placeholder }: Partial<UnderlinedInputProps>) => {