7 asked

1

와.. 이해가 됐어요 감사합니다!!
주말인데 시간내서 답해주셔서 감사합니다!
남은 주말 잘 보내세요~

1

좋은 질문 감사합니다! 제가 말로 설명 드리는 것 보다 예시를 보여드리는게 좋을 것 같아서 한 번 가져와봤어요!

generic을 사용하지 않고 타입을 string 으로 지정하면, setSelectedTag() 를 호출할 때 tag로 넘겨받지 않은값도 selectedTag 가 될 수 있습니다.

작성해주신 코드를 조금만 변경해보자면

import { useState } from "react";
import TagButton from "./TagButton";

interface ITagListProps {
  tagList: string[];
  onTagClick: (tag: string) => void;
}

export default function TagList({
  tagList,
  onTagClick,
}: ITagListProps) {
  const [selectedTag, setSelectedTag] = useState<string>(tagList[0]);
  return (
    <div className="flex gap-x-4" onClick={(event) => {
      const eventTarget = event.target as HTMLButtonElement;
      const tag = eventTarget.textContent as string
      onTagClick(tag)
    } }>
      {tagList.map((tag) => (
        <TagButton
          key={tag}
          isChecked={tag === selectedTag}
          onClick={() => setSelectedTag("inflearn")} // 여기서 에러 발생하지 않음
        >
          {tag}
        </TagButton>
      ))}
    </div>
  );
}

tagList 에 어떤 값이 들어오던 상관없이 selectedTag 를 자유롭게(?) 변경할 수 있게됩니다. 그래서 TypeScript를 활용하는 장점이 살짝 떨어지게 됩니다. 반면 generic을 사용하는 현재 코드를 활용하면

위 스크린샷에서 보시는 것처럼 조금 더 안정적으로 타입을 관리할 수 있습니다.