10/27

팀원 코드리뷰 시 배운 점

props으로 받아온 데이터 객체를 사용하기 쉽게 구조분해할당해준다.
useMemo와 useCallback도 적절하게 사용한다

const WaffleCard = ({
  type,
  cardData,
  width,
  height,
  onClickCard,
  onClickLikeIcon,
  onClickFavoriteIcon,
  ...props
}) => {
  const [ref, hover] = useHover();
  const {
    id = 'edit',
    emoji = '🧇',
    cardColor = Common.colors.yellow,
    createdAt = new Date(),
    favoriteToggle = false,
    favoriteCount = 0,
    likeToggle = false,
    likeCount = 0,
    hashTags = [],
  } = cardData;
  const days = useMemo(() => countDaysFromToday(createdAt), [createdAt]);

  const handleClickCard = useCallback(
    e => {
      const cardId = e.target.closest('[data-id]').dataset.id;
      onClickCard && onClickCard(cardId);
    },
    [onClickCard],
  );

  const handleClickLikeIcon = useCallback(
    e => {
      e.stopPropagation();
      onClickLikeIcon && onClickLikeIcon(e);
    },
    [onClickLikeIcon],
  );

  const handleClickFavoriteIcon = useCallback(
    e => {
      e.stopPropagation();
      onClickFavoriteIcon && onClickFavoriteIcon(e);
    },
    [onClickFavoriteIcon],
  );

그 외 알게 된 점들

• 스타일을 인라인으로 적용하면 우선순위가 높게 잡하기 때문에 컴포넌트 사용 시 확장한 스타일이 안먹힘
• 조건부로 태그 종류 정하기

const Tag = block ? 'div':paragraph ? 'p':'span'; 

// 정해진 태그에 스타일 입히기
const StyledTag= styled(Tag)`
	color: red;
`