React + Type Script 로 팝업창 만들기( + Type {children: Element} has no properties )에러 해결방법

최근 프로젝트를 설계하면서 공용 컴포넌트를 어떻게 짜야되는지에 대한 고민이 깊다.

그래도 하나씩 설계하는 가운데, 팝업창 컴포넌트를 만드는 과정과 생긴 오류에 대해 적어보고자 한다.

 

0. 목표 설정

일단 이런 형태의 팝업창을 만들 예정이다.

안에 들어가는 컨텐츠에 대한 고민은 나중에 하기로 하고,

화면 가운데에 뜨는 하얀 창 + 외부 어두운 창 의 컴포넌트를 만들고 싶었다.

 

실패기

1. Styled-components로 만들기

사실 이건 볼것도 없이 실패했다.

팝업 창을 만들려면 내부 흰 부분 + 밖 검은 부분 두개의 div 가 필요한데,

재사용성을 위해 두개의 Outer, Inner 를 따로 사용하려면 여간 번거로운게 아니었다.

 

2. React Components 형태로 제작하여 Element 전달하기

interface IPopup {
}
export const Popup = () => {

  return (
    <Outer>
      <Inner>

      </Inner>
    </Outer>
  )
}

Styled-Components를 활용하여 Inner / Outer의 CSS를 지정한 후, 위와 같이 컴포넌트를 만들었다.

여기서 오류가 없길래 어? 하면서 사용해봤는데,

"Type {children: Element} has no properties in common with type IntrinsicAttributes"

라는 오류가 출력되었다.

알고보니, Popup안에 들어갈 Element를 명시하지 않은 상태에서 넘겨주다보니 오류가 난 거였다.

 

3. children을 넘겨준 코드로 수정

interface IPopup {
  children: ReactNode; // 1. ReactNode Type 추가
}

export const Popup = ({children}: IPopup) => { // 2. Props로 전달해주고

  return (
    <Outer>
      <Inner gap={gap}>
        {children} // 3. {}와 함께 children을 전달해주면 끝이다.
      </Inner>
    </Outer>
  )
}

사용할 때 <Popup> </Popup> 이런 컴포넌트 안에 요소를 넣어줄 것이므로,

Popup안에 넣을 요소를 통째로 children로 정의하고 사용하면 된다.

타입은 React에서 import 할 수 있는 ReactNode 타입을 지정하고

위와 같이 써주면 완성!

 

덕분에 비슷한 팝업창을 양산할 수 있게 되었다!

 

#참고링크

https://bobbyhadz.com/blog/react-type-children-has-no-properties-in-common