[Polymorphic React Component] - 1

Polymorphism

Polymorphism (다형성) 은 객체지향 프로그램의 코어 컨셉중 하나입니다. 자바스크립트에서 다형성은 다른 signatures(input and output of functions or methods)을 가지는 동일한 함수가 여러번 호출되는것을 뜻합니다. 

 

Polymorphic React Component

많이 사용하는 Chakra UI, MUI가 대표적인 polymrphic component를 구현한 오픈소스 라이브러리 입니다. 

리액트컴포넌트에서 다형성을 구현하는 간단한 방법은 아래와 같습니다.  

1. 컴포넌트는 다형성을 prop으로 받아야합니다. 
2. 컴포넌트는 전달받은 항목을 element 타입으로 렌더링 해야합니다. 
3. 타입스크립트를 사용한다면, 컴포넌트는 전달받은 element 타입/속성/ref에 대한 타입에러 발생시 이를 보여줘야합니다. 

 

간단한 컴포넌트로 구현해보겠읍니다. 

App 컴포넌트는 prop으로 전달받은 as를 element type으로서 Component에 렌더링합니다. prop으로 전달받지않으면 <span>으로 렌더링 됩니다.

이와같이 렌더링했을때 결과 입니다.



배앰 ~ 각 컴포넌트는 prop으로 전달받은 em, div, h1으로 렌더링 되었습니다. 

 

아가씨 .. 혹시 prop으로 받은 As를 바로 Component로 렌더링할수 있을까요?

 

과연 렌더링이 될 것인가....

 

정답은 아니요 입니다. 

 

 

 

간단하게 구현한 다형성 컴포넌트에는 여러가지 문제점이 있습니다.

올바르지않은 HTML Tag을 전달해도 렌더링이 그대로 되는 이슈

이게 뭐시당가 ....

이 외에도 prop으로 받지않는 element type을 전달할수 있는 문제 등 이 있습니다. 이런 문제들은 Type을 적용시켜 type safe한 polymorphic 컴포넌트를 구현할 수 있습니다.

 

 

 

타입스크립트를 사용해서 더 견고한 polymorphic 컴포넌트 구현하기 

이전과 다르게 타입 에러가 발생합니다. 타입스크립트를 사용하면 더 견고한 컴포넌트를 만들 수 있습니다.