[Next] 중첩된 Button버튼의 태그를 바꿀 때 다양한 방법들

사이드 프로젝트 '같이행' 퍼블리싱 작업 중 프로필 수정 클릭 시 모달이 나오는 형태인데, 이런 에러가 나왔다.

 

해석하면 

 

보통 한 <button> 요소를 다른 <button> 요소 안에 중첩하려고 할 때 발생하고. HTML은 이러한 중첩을 허용하지 않는다고 한다. 추측되기론, EditProfileModal.tsx 안에 있는 button요소가 중첩되어 에러를 내는 것같다. 

 

 혹시 이전에 만든 공통 컴포넌트에서 전달하는 props 타입이 이상한 것이 아닐까 먼저 확인해보기

linkText의 타입은 이상이없는 것같고, 

 

사실, button이 중첩된다하면 간단히 button인 태그를 다른 태그로 바꾸면된다.

허나! 직접 DOM 이벤트를 사용하는 경우 TypeScript가 정적분석하기 어려워 핸들러의 타입을 추론하지 못해,

빨간줄이 팍!나올껄?

 

그렇기에 이런 경우 명시적으로 이벤트 핸들러의 타입을 지정해야한다.

<span onClick={onOpen as React.MouseEventHandler<HTMLDivElement>} > 프로필 수정 </span>

onOpen 함수가 HTMLDivElement에 대한 이벤트 핸들러임을 인식한다.

 

  const handleOpenModal = () => {
    onOpen();
  };

  return (
    <div>
      <span
        onClick={handleOpenModal}
        className='text-secondary-main text-subtitle-02'
      >
        프로필 수정
      </span>

typeScript가 handleOpenModal 함수의 타입을 정확하게 추론하여 빨간 줄을 없앨 수 있다. 가독성을 위해서도 명시적으로 이벤트 핸들러의 타입을 지정하는 것보다 깔끔한 방법인 것같다.

 

그러나, 빨간줄은 사라지지않는다..!

 

다른 방법으로

  {linkText && (
          <button
            type='button'
            onClick={onClick}
            className='text-secondary-main text-subtitle-02'
          >
            {linkText}
          </button>
        )}

 

먼저 링크텍스트가 있는지에 조건여부를 추가한 뒤 span태그였던 곳을 button태그로 변경하였다.. 근데 해결되었다..

너무 간단한 에러를 깊게 생각했었던 것같다. 허무맹랑하다..ㅎㅎ

하지만 간단한 것을 간과하다니! 다음에는 좀 더 태그를 사용할 때 주의할 점을 염두하며 작업해야겠다.