[Typescript, React] 태그 클릭 시 value 값 가져오기

개인블로그를 만들어보고 있는데, 벨로그나 티스토리처럼 태깅 작업도 추가하고 싶었다.
버튼 요소인 태그 클릭 -> 해당 value값을 정상적으로 출력하는지
를 보려고했는데,

AS-IS

  // 태그 클릭 -> 상태 변경
  const handleClickedTagName = (event: MouseEvent<HTMLButtonElement>) => {
    console.log(event.target.value); // Error
  };
  return (
    <div className="w-10">
      <button
        className="font-semibold rounded-md"
        onClick={(e) => handleClickedTagName(e)}
        value={tag}
      >
        {tag}
      </button>
    </div>
  );

에러메세지; 'EventTarget' 형식에 'value' 속성이 없습니다.

console.log(event.target) -> HTML요소가 몽땅 출력..
<button class="font-semibold rounded-md" value="Personal">Personal</button>

해결

🤨 input 요소로 바꿔서 onChange() 쓰기?
🤨 당장은 타입스크립트 에러같아서 조금만 고치면 될거같다는 생각이 들어..

const Tag = ({ tag }: ITags) => {
  const [clickedTag, setClickedTag] = useRecoilState(tagState);
  // 태그 클릭 -> 상태 변경
  const handleClickedTagName = (event: EventTarget & HTMLButtonElement) => {
    console.log(event.value);
  };
  return (
    <div className="w-10">
      <button
        className="font-semibold rounded-md"
        onClick={(e) => handleClickedTagName(e.currentTarget)}
        value={tag}
      >
        {tag}
      </button>
    </div>
   );

onClick 메소드 안에 event 파라미터를 event.currentTarget 객체로 수정하니 button 요소의 value 값을 가져올 수 있게 되었다.
더 많은 방법이 있겠지만.. 일단 해결.