React에서 빈 엘리먼트에 속성을 추가할 수 있을까? Fragment와 예시제공

React에서 빈 요소에 속성을 추가할 수 있나요?

React에서 빈 요소는 <> 또는 React.Fragment로 표시되며, 추가 노드를 DOM에 추가하지 않고 여러 요소를 반환하는 데 일반적으로 사용됩니다. 이를 사용하여 부모 래퍼 요소 없이 자식 목록을 그룹화할 수 있습니다.

React에서의 Fragment

Fragment를 사용하는 일반적인 경우는 컴포넌트가 여러 인접한 요소를 반환해야 할 때입니다. 이러한 요소들을 <div>로 묶는 대신, Fragment를 사용하여 마크업을 보다 깔끔하게 유지하고 DOM에 추가적인 노드를 피할 수 있습니다.

function Glossary(props) {
  return (
    <div>
      {props.items.map(item => (
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </div>
  );
}

위의 예제에서 React.Fragment를 사용함으로써 중복된 <div> 래퍼 요소를 추가하지 않을 수 있습니다. 이를 통해 생성된 마크업이 더 깔끔하게 유지되며, DOM에 삽입되는 불필요한 노드의 수도 줄어듭니다.

Fragment에 속성 추가하기

Fragment는 요소를 그룹화하기 위한 것이기 때문에 속성을 직접적으로 빈 요소에 추가할 수는 없습니다.

그러나 배열을 반복하면서 각 Fragment에 key를 추가해야 하는 경우, Fragment 내부의 외부 요소에 key 속성을 사용할 수 있습니다. 이를 통해 각 항목을 고유하게 식별하고 React의 key 경고를 방지할 수 있습니다.

todos.map((t, i) => <React.Fragment key={i}>{t.name}</React.Fragment>)

인덱스를 key로 사용하는 것은 특히 목록이 순서를 변경하거나 수정될 수 있는 경우에는 좋은 관행으로 간주되지 않습니다. 더 안정적이고 신뢰할 수 있는 key를 사용하기 위해 각 항목과 관련된 고유 식별자를 사용할 것을 권장합니다.

요소에 스타일링이나 접근성 속성과 같은 속성을 적용할 때는 <div> 또는 <span>과 같은 기본 컴포넌트를 사용하는 것이 좋습니다. 이러한 컴포넌트를 사용하면 속성을 자유롭게 추가할 수 있으며, 좋은 접근성 관행을 유지할 수 있습니다.

todos.map((todo) => <div key={todo.name}>{todo.name}</div>)

요소에 속성을 적용할 때는 항상 접근성을 염두에 두고 적절한 컴포넌트를 선택하고, 모든 사용자가 콘텐츠에 접근할 수 있도록 해야 합니다.

요약

React에서 빈 요소는 <> 또는 React.Fragment로 표시되며, 추가 노드를 DOM에 추가하지 않고 여러 요소를 그룹화할 수 있습니다. Fragment 자체에 직접 속성을 추가할 수는 없지만, Fragment 내부의 요소에 속성을 추가하여 원하는 효과를 얻을 수 있습니다. 배열 반복 시 안정적이고 신뢰할 수 있는 렌더링을 유지하기 위해 적절한 키를 선택하는 것이 중요합니다. 요소에 속성을 적용할 때는 접근성을 우선으로 생각하고 네이티브 컴포넌트를 선택하세요.

참고 자료 :

https://stackoverflow.com/questions/73359286/can-you-add-properties-to-the-empty-element-in-react

같은 카테고리의 다른 글 보기 :

reactjs