Today I Learned

오늘 한일✅

• DropdownCategory 리팩토링? map으로 변경하였다.
• 댓글을 리코일(처음 사용해봄!!)을 사용하여 post.id를 가져왔다.

구현 방법✅

1. 초반에는 아무생각없이 이렇게 사용하고 있었다😏

// DropdownCategory.tsx
{
<CategoryBtn onClick={buttonClickHandler}>독서</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>음악</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>고민 상담</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>부동산</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>영화</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>운동</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>음식</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>연애</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>게임</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>드라마</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>전자기기</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>경제</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>제테크</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>사회</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>세계</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>생활</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>과학</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>정치</CategoryBtn>
<CategoryBtn onClick={buttonClickHandler}>문화</CategoryBtn>
}

2. 글을 쓸때는 전체라는 카테고리가 필요없어 filter를 사용해서 전체라는 이름만 빼고 detailCategroyFilter에 넣고 map을 돌려서 코드 길이를 줄일 수 있었다

  const detailCategroyFilter = CategorysList.filter((el) => el.name !== '전체');

  return (
    <S.DropdownBox>
      <S.DropdownConatainer>
        <S.DropdownWapper>
          {detailCategroyFilter.map((data) => {
            return (
              <S.CategoryBtn onClick={buttonClickHandler}>
                {data.name}
              </S.CategoryBtn>
            );
          })}
        </S.DropdownWapper>
      </S.DropdownConatainer>
      <S.CategoryConfirmBtn onClick={() => confirmButtonClickHandler()}>
        완료
      </S.CategoryConfirmBtn>
    </S.DropdownBox>
  );
};

알게 된점✅

• 코드를 최대한 줄여보자!!!!! 매니저님 감사합니다