[Frontend/React] 9. Fragment / Potal 사용하기

Fragment 사용하기

함수형 컴포넌트를 리턴하기 위해서는 하나의 돔 요소를 리턴해야 합니다. 따라서 불필요한 div 태그가 늘어날 수 있습니다.

예를 들면 아래와 같습니다.

 

return (
  <div>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
  </div>
)

 

하지만 fragment 를 사용하면 div 안에 있는 3개의 p 태그만 출력 되도록 정의할 수 있습니다.

사용법은 아래와 같습니다.

 

return (
  <>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
  </>
)

 

---

Potal 사용하기

홈페이지를 구성하는 컴포넌트들은 거의 다 root 라는 아이디를 가진 div에 렌더링 됩니다. 하지만 팝업과 같은 경우에는 별도의 요소에 렌더링 되기도 하는데, 이러한 경우에 Potal 을 사용합니다.

return (
  <>
    {ReactDOM.createPortal(
      <div>
        <h2>경고</h2>
        <p>100 이상 증가시키면 에러가 날 수 있습니다.</p>
      </div>,
      document.getElementById('modal')
    )}
  </>
)

 

 

 

 

---

출처 : 실전 리액트 프로그리맹 - 인프런 (추천합니다 !!)

실전 리액트 프로그래밍 - 인프런