순수 React만으로 다이내믹 태그 네이밍하기

간단한 트릭인데 생각보다 많은 곳에 쓰일 수 있는 팁입니다.

아래와 같이 사용하면 여러가지 HTML 태그를 한 번에 구현할 수 있습니다. 

module.exports = props => {

const MyTag = props.as

return <MyTag />

}

ex)

<SomeModule as="h1" />

따라서 위와 같이 하면 <h1 />이 리턴되겠죠.

미리 알아야 할 점은 MyTag에 해당하는 컴포넌트 이름의 첫 글자가 대문자여야 합니다.

그래서

module.exports => props => {

const myTag = props.as

return <myTag />

}

와 같이 작성하면 동작하지 않을겁니다.