2023 11 29

2023-11-29

React Fragments

참고: https://react.dev/reference/react/Fragment 참고: https://bo5mi.tistory.com/208

• 개요
  • <Fragment>를 통해 싱글 엘리먼트가 필요한 상황에 그룹핑
  • 결과적으로 도출되는 DOM이랑은 상관이 없음
  • <Fragment />를 줄여서 <></> 를 쓰는 경우가 허다

• Props
  • optional key
  • key를 Fragement에 전달하기 위해서는 <></> 못써

• Usage
  • 여러개의 컴포넌트를 같이 쓸 때 사용
    • 하나의 컴포넌트만 리턴할 수 있는 리액트 특성상 필요
  • 레이아웃, 스타일에 영향 X

• React.Fragment & Fragment
  • <Fragment>: JSX 단축 구문으로 사용
  • <React.Fragment>: 완전한 형태의 React 요소
    • 위 둘은 기능적으로 완전히 동일
  • 컴포넌트가 렌더링 될 때 실제 DOM에는 나타나지 않고, 여러 요소를 그룹화하는 역할을 수행

• 리액트 컴포넌트에서 요소 여러개를 하나로 감싸는 이유

  - Virtual DOM에서 컴포넌트 변화 감지 시 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야함