Section 8: Refs(참조) & Portals(포탈) 활용하기 > 프래그먼트, 모달

뚜루미·2024년 7월 7일

목록 보기

38/39

JSX 코드를 작성할때 JSX 값은 하나의 루트 요소만 가질 수 있습니다.

예를 들어, 다음 코드는 유효하지 않으며 오류를 발생시킵니다:

return (
	<h2>Welcome! </h2>
	<p>React is awesome!</p>
);

해결방안 중 하나는 이러한 요소들을

로 감싸는 것입니다.

return (
	<div>
		<h2>Welcome! </h2>
		<p>React is awesome!</p>
	</div>
);

하지만 이 방법에는 단점이 있습니다. 오류를 제거하기 위해 실제로 필요하지 않은 별도의 <div>가 DOM에 추가됩니다.

그렇기 때문에 리액트는 “리액트 프래그먼트”라는 특별한 JSX 요소를 제공합니다.

이것은 단일 루트 JSX 요소만 있도록 보장하는 래퍼로 사용될 수 있으면서 동시에 어떠한 DOM 요소도 렌더링하지 않습니다.

다음과 같이 사용할 수 있습니다:

import { Fragment } from 'react';
 
// ... other code ...
 
return (
  <Fragment>
    <h2>Welcome!</h2>
    <p>React is awesome!</p>
  </Fragment>
);

또한, 대부분의 리액트 프로젝트(Vite나 CRA으로 생성된 프로젝트)에서는 더 간단한 형태를 제공합니다.

import { Fragment } from 'react';
 
// ... other code ...
 
return (
  <>
    <h2>Welcome!</h2>
    <p>React is awesome!</p>
  </>
);

<dialog> 요소를 사용하면 웹사이트 방문자가 키보드의 ESC 키를 눌러 닫을 수 있습니다.

하지만, 이것은 버튼 클릭으로 모달을 닫는 것과 달리, onReset함수를 트리거하지 않습니다.

ESC 키로 대화창을 닫을 때 onReset 이 트리거되도록 하려면 <dialog> 요소에 내장된 onClose 속성을 추가하고 그 값을 onReset 속성에 바인딩해야 합니다.

<dialog ref={dialog} className="result-modal" onClose={onReset}
   ...
</dialog>

React