리액트에서 string 데이터와 ReactElement가 혼합된 데이터 렌더링 하기

리액트에서 배열의 데이터가 문자열과 ReactElement 두 가지 유형이 들어올 때, 해당 배열을 map을 사용하여 렌더링하려면 각 항목의 유형을 확인하고 적절히 처리해야 합니다.

 

 

렌더링 해야하는 데이터

const items = [
	"20180326-2",
	{
		$$typeof: Symbol(react.element)
		key: null
		props: {}
		ref: null
		type: "br"
		_owner: FiberNode {tag: 11, key: null, elementType: {…}, type: {…}, stateNode: null, …}
		_store: {validated: false}
		_self: null
		_source: null
	},
	"dddd"
]

 

예시 코드

배열 items의 각 항목을 검사하고, 문자열인 경우 <div>로 래핑하여 표시하며, ReactElement인 경우 해당 엘리먼트를 그대로 반환합니다.

React.cloneElement를 사용하여 ReactElement에 key prop을 추가합니다.

이 경우, 문자열 항목은 <React.Fragment>로 감싸져 반환되며, ReactElement 항목은 이전과 동일하게 처리됩니다.

<React.Fragment>는 브라우저의 DOM에 추가적인 노드를 생성하지 않기 때문에 결과적으로 출력되는 HTML 구조에는 영향을 미치지 않습니다.

import React from 'react';

function App() {
  const items = [
    "20180326-2",
    <br />,
    "dddd"
  ];

  return (
    <div>
      {items.map((item, index) => {
        // 항목이 문자열인 경우
        if (typeof item === 'string') {
          return <React.Fragment key={index}>{item}</React.Fragment>;
        }
        // 항목이 ReactElement인 경우 (예: JSX 엘리먼트)
        else if (React.isValidElement(item)) {
          return React.cloneElement(item, { key: index });
        }
        return null;
      })}
    </div>
  );
}

export default App;