[TIL] 0207

WaffleCard Refactoring

탭에 대한 정보를 상수로 저장해서 사용하도록 리팩토링했다
탭포인터 이동을 해야하기때문에 인덱스가 꼭 필요했고
상수를 객체들이 들어있는 배열의형태로 만들어서 구현했다
프로퍼티에 대한 인덱스를 구할땐 findindex함수를 사용했다

// constants/index.js
export const TAB_MENU = [
  { title: '오늘의 카드', name: 'total' },
  { title: '나의 카드', name: 'my' },
  { title: '관심 카드', name: 'like' },
];

// Tab.jsx
return (
    <TabItemContainer {...props}>
      <TabItem
        title={TAB_MENU[0].title}
        name={TAB_MENU[0].name}
        activeItem={activeItem}
        onClick={handleClickTabItem}></TabItem>
      <TabItem
        title={TAB_MENU[1].title}
        name={TAB_MENU[1].name}
        activeItem={activeItem}
        onClick={handleClickTabItem}></TabItem>
      <TabItem
        title={TAB_MENU[2].title}
        name={TAB_MENU[2].name}
        activeItem={activeItem}
        onClick={handleClickTabItem}></TabItem>
      <TabItemPointer currentActive={activeItem} {...props}></TabItemPointer>
    </TabItemContainer>
  );

const TabItemPointer = styled.div`
  ...
  transform: ${({ currentActive }) =>
    currentActive &&
    `translate(${
      TAB_MENU.findIndex(obj => obj.name === currentActive) * 100
    }%, 0)`};
`;

피드백
인덱스 정보가 유의미한 정보는 아니기 때문에 (뷰 스타일에 관한 것)
배열보다는 객체 형태로 바꿔서 키를 기준으로 인덱스를 구하는게 좋을 것 같고, TabItem컴포넌트 하드 코딩하는 것보다 상수 객체로 map을 돌려서 키와 값을 뽑아내 TabItem컴포넌트 렌더링하는 방법이 더 좋을 거라는 피드백을 들었다

• 객체로 map을 사용하는 방법

  return (
    <TabItemContainer {...props}>
      {Object.entries(TAB_MENU).map(([key, value]) => (
        <TabItem
          title={value}
          name={key}
          activeItem={activeItem}
          onClick={handleClickTabItem}
        />
      ))}
      <TabItemPointer currentActive={activeItem} {...props}></TabItemPointer>
    </TabItemContainer>
  );

• 객체의 특정 key의 index를 찾는 방법

const TabItemPointer = styled.div`
  ...
  transform: ${({ currentActive }) =>
    currentActive &&
    `translate(${Object.keys(TAB_MENU).indexOf(currentActive) * 100}%, 0)`};
`;

---

MonthSub Refactoring

LikeToggle이 너무 많은 페이지에서 쓰이고 depth가 깊었기 때문에 LikeToggleWrapped라는 컴포넌트를 만들어서 api와 contextApi를 실행시키는 로직을 짜고 순수한 LikeToggle컴포넌트에 Api로직이 포함된 handler함수와 contextApi의 상태를 props으로 넘겨주도록 구현했었다

하지만 문제는 후에 댓글이나 다른 컨텐츠에도 좋아요 기능이 있어야 할 텐데 지금의
Wrapped에는 시리즈 좋아요 api만 작성되어있었다
1. api마다 wrapped컴포넌트를 만든다
2. 현재의 wrapped컴포넌트에 모든 좋아요 관련 api를 작성해놓고 props을 받아 조건 실행한다
두 가지 방법이 있었지만 다 마음에 들지 않았다..

결국은 LikeToggleWrapped를 SeriesLikeToggle이라고 이름을 변경했다
SeriesLikeToggle에는 시리즈 좋아요 관련 api만 작성되어있고,
후에 댓글 부분이나 다른 부분에 LikeToggle이 필요하다면 그때는 시리즈 만큼 많은 페이지에서 쓰이지 않을 것이기 때문에 순수한 LikeToggle를 사용해 page단 컴포넌트에서 api와 context를 props으로 받아서 사용해도 될 것 같다고 생각했기 때문이다.