[ 7/4 TIL ] 필터바 리팩토링

필터바 리팩토링

매니저님의 조언대로 리팩토링을 해보자

💬 기술 매니저님의 조언

• 상수함수로 배열을 만들어서 map을 사용해 반복되는 label을 구현해보세요.(간소화, 최적화)
• active에 들어간 1,2,3은 index로 대체가 가능합니다.
• active가 인덱스일 때 active 값을 줄 수 있습니다.
• 함수에서 판별해서 working인지 done인지에 따라 span의 값을 다르게 넣어줄 수 있습니다.
• CountNum이 'all'일 때 안 보이게 컴포넌트 안에서 if문을 사용할 수 있죠

기존 코드

const StyledDropDown = ({ onChangeHandler, workNum, doneNum }) => {
  const [span, setSpan] = useState(0);
  const [active, setActive] = useState(1);
  const tabMove = (x, id, value) => {
    setSpan(x);
    setActive(id);
    onChangeHandler(value);
  };
  return (
    <StyledDropDownBlock>
      <Glider translatevalue={span}></Glider>
      <label
        onClick={() => tabMove(0, 1, "all")}
        className={active === 1 ? "active" : ""}
      >
        All
      </label>
      <label
        onClick={() => tabMove(100, 2, "working")}
        className={active === 2 ? "active" : ""}
      >
        🔥 Working..!
        <CountNum className="countNum">{workNum}</CountNum>
      </label>
      <label
        onClick={() => tabMove(200, 3, "done")}
        className={active === 3 ? "active" : ""}
      >
        🌈 Done...!
        <CountNum className="countNum">{doneNum}</CountNum>
      </label>
    </StyledDropDownBlock>
  );
};

리팩토링

• 필터명과 work, done의 합계가 필요해서 둘의 key와 value를 갖는 객체로 만들었다.
• active에 map 메서드의 index값을 넣었다.
• span의 transform에 들어가는 x값도 100씩 늘어나기 때문에 index에 100을 곱한 값을 setSpan에 넣어줬다.
  ➡️ 수정 전에는 하드 코딩으로 작성한 반면에 수정 후에는 재사용 가능한 방식으로 동작한다.
• 컴포넌트 안에서 조건문을 사용해 sum이 있을 때 CountNum이 그려지도록 하였다.

const StyledDropDown = ({ onChangeHandler, workNum, doneNum }) => {
    const labelName = [
        { filter: 'all' },
        { filter: '🔥 Working..!', sum: workNum },
        { filter: '🌈 Done...!', sum: doneNum },
    ];
    const [span, setSpan] = useState(0);
    const [active, setActive] = useState(0);
    const tabMove = (idx, value) => {
        const tranX = idx * 100;
        setSpan(tranX);
        setActive(idx);
        onChangeHandler(value);
    };
    return (
        <StyledDropDownBlock>
            <Glider translatevalue={span}></Glider>
            {labelName.map((item, idx) => {
                return (
                    <label
                        onClick={() => tabMove(idx, 'all')}
                        className={active === idx ? 'active' : ''}
                        key={item.filter}
                    >
                        {item.filter}
                        {(item.sum || item.sum === 0) && (
                            <CountNum className="countNum">{item.sum}</CountNum>
                        )}
                    </label>
                );
            })}
        </StyledDropDownBlock>
    );
};