[React]태그의 이름을 동적으로 처리

React에서 Tag의 이름을 동적으로 처리하는 방법입니다.

 

StackOverFlow의 아래 질문을 참고하여 코드를 작성하였습니다.

https://stackoverflow.com/questions/33471880/dynamic-tag-name-in-jsx-and-react 

Dynamic tag name in jsx and React

---

Hook기반의 컴포넌트

선택한 값에 따라서 '태그의 크기가 바뀐다.' 문구의 크기가 변경되는 코드입니다.

1. App 컴포넌트의 selectValue 값을 'h1'으로 초기화합니다.

2. selectValue 값을 HTag 컴포넌트로 전달합니다.

3. HTag 컴포넌트는 props.tag로 접근하여 태그를 동적으로 처리합니다.

 

HTag 컴포넌트에서 태그의 이름을 동적으로 처리하는 3가지 방법

1. props.tag 값을 변수로 받아서 변수를 태그 안에 넣거나(※변수명은 대문자로 시작해야함)

2. props.tag를 태그 안에 넣거나

3. props.tag에 따라서 다른 값을 반환하는 함수를 개발

 

함수로 처리하는 방법은 코드가 길어지지만, h1~h6 태그가 아닐 경우 default로 처리할 수 있어서 에러를 방지할 수 있습니다.

const returnHTag = (value) => {
  switch (value) {
    case "h1":
      return <h1>태그의 크기가 바뀐다.</h1>;
    case "h2":
      return <h2>태그의 크기가 바뀐다.</h2>;
    case "h3":
      return <h3>태그의 크기가 바뀐다.</h3>;
    case "h4":
      return <h1>태그의 크기가 바뀐다.</h1>;
    case "h5":
      return <h1>태그의 크기가 바뀐다.</h1>;
    case "h6":
      return <h1>태그의 크기가 바뀐다.</h1>;
    default:
      return <h1>default</h1>;
  }
};

export default function HTag(props) {
  // TagName이 소문자로 시작할 경우 다르게 컴파일 된다.
  var TagName = props.tag;
  return (
    <>
      <TagName>태그의 크기가 바뀐다.</TagName>
      <props.tag>태그의 크기가 바뀐다.</props.tag>
      {returnHTag(props.tag)}
    </>
  );
}

---

어떻게 동적으로 처리되는가?

React에서 컴파일되는 과정은 아래와 같습니다.

소문자일 경우
<tagName />은 React.createElement('tagName')으로 컴파일됩니다.
tagName의 값이 아닌 tagName으로 컴파일됩니다.

대문자일 경우
<TagName />은 React.createElement(TagName)으로 컴파일됩니다.
TagName의 값으로 컴파일됩니다.

객체일 경우
<props.tag/>은 React.createElement(props.tag)으로 컴파일됩니다.
props.tag의 값으로 컴파일됩니다.

---

마무리

Class컴포넌트로 예제 작성하다가 잘 안 풀려서 Hook으로 작성하였습니다.

사용할 일이 있을지는 모르겠지만, 궁금해서 작성해봤습니다.