React 앱 내부에서 사용할 컴포넌트의 태그를 다른 것으로 변경하는 방법을 알아봅니다.



# react 컴포넌트 태그를 변경, 바꾸기
예를들어 기본값은 span 태그를 사용하되 옵션으로 div 태그를 사용할 수 있도록 변경이가능한 컴포넌트를 만드는 방법입니다.

구현하기 위해서 아래와 같은 순서대로 수행하게 됩니다.

  • 1. 사용할 태그 요소를 props로 받음
  • 2. props가 없는 경우는 기본값 span을 사용함
  • 3. 변수 Tag를 선언 후 props 값을 적용

그럼 아래에서 간단히 예제를 만들어보려 합니다.

아래 예제는 myComponent를 불러와 사용합니다. 이때 div 태그에 출력, 렌더링하려고 합니다.

@ myApp.jsx
import myComponent from '../myComponent';

...
<myComponent as={'div'} />
...

myApp에서는 myComponent를 불러와 추가하였습니다. 이때 as 이름의 prop을 추가하고 값으로 div 값을 선언하였습니다. 즉 컴포넌트의 태그로 div를 사용하겠다는 뜻입니다.

다음으로 아래는 myComponent의 소스 코드 내용입니다.

@ myComponent.jsx
import React from 'react';

const myComponent = (props) => {
  const Tag = props.as || 'span';

  return (
    <Tag>
      props.children
    </Tag>
  );
};

export default myComponent;

하위 컴포넌트 myComponent는 Tag 이름의 변수로 props.as의 값을 받아 페이지에 출력합니다. 이때 기본값은 'span'으로 설정되도록 아래와 같이 사용하였습니다.
const Tag = props.as || 'span';

여기까지 react 컴포넌트의 태그를 원하는 요소로 변경하여 웹페이지에 사용하는 방법을 알아보았습니다.