[React] JSX 제한사항 (Fragment)

JSX를 작성할 때 루트 JSX 요소가 1개만 있어야 하고 나란히 있으면 안된다.

...
return (
	<h2> Hi! </h2>
	<p> This does not work! </p>
);

 

해결 방법

1. div 로 감싸기

...
return (
	<div>
		<h2> Hi! </h2>
		<p> This does not work! </p>
	</div>
);

전체를 div 로 감싸서 루트 JSX 요소가 1개만 있게 만든다.

 

2. 배열로 감싸기

아래 코드와 같이 배열 요소로 JSX를 묶어서 반환하는 방법이 있습니다.

...
return [
		<h2> Hi! </h2>,
		<p> This does not work! </p>
];

이때 전체를 감싸고 있는 중괄호{} 가 있다면 제거 해야합니다.

 

예를 들어 이런 코드가 있다면

...
return ( 
	<div>
	  {error && (
	    <ErrorModal
	      title={error.title}
	      message={error.message}
	      onConfirm={errorHandler}
	    />
	  )}
	</div>
)

...
return [
  error && (
    <ErrorModal
      title={error.title}
      message={error.message}
      onConfirm={errorHandler}
    />
  )
]

위 처럼 변경 해줘야 합니다.

 

하지만 이때 콘솔창에서 다음과 같은 에러가 발생합니다.

 

JSX 요소인 배열을 사용할 때 리액트는 모든 요소에 대한 키를 필요로 합니다.

따라서 아래와 같이 key 프로퍼티를 추가해주면 됩니다.

return [
  error && (
    <ErrorModal
      key="키 작성해주기"
      title={error.title}
      message={error.message}
      onConfirm={errorHandler}
    />
  )
]

 

새로운 문제 div soup

<div>
  <div>
    <div>
      <div>
         <h2> 제목입니다 </h2>
        </div>
    </div>
  </div>
</div>

코딩을 하다보면 구조적으로 의미를 갖지 않는 div들이 중첩되어 생기는 경우가 많다. 이 경우엔 중첩되는 CSS를 사용하게 되면 스타일링이 깨질 수 있으며 애플리케이션이 느려질 수도 있다.

리액트는 모든 요소 또는 최소한 몇 개의 요소라도 내용이 변경이 되었는지 확인을 한다. 따라서 불필요한 내용을 렌더링하는 것은 일반적으로 좋지 않다.

 

해결법

1. Wrapper 요소 사용하기

아무런 의미를 갖지 않는 Wrapper를 하나 만들어줍니다.

// Wrapper.js

const Wrapper = (props) => {
  return props.children;
};

export default Wrapper;

// Wrapper.js를 import해 사용할 아무 파일
import Wrapper from './Wrapper'

...
return (
    <Wrapper>
    ...
    </Wrapper>
);

 

2. React에 내장된 컴포넌트 사용 - Fragment

import React from 'react';
...
return (
  <React.Fragment>
   ...
  </React.Fragment>
);

import React, {Fragment} from 'react';
...
return (
  <Fragment>
    ...
  </Fragment>
);

 

3. React에 내장된 컴포넌트 사용 - <> </>

빌드 워크 플로우가 지원한다면 빈 태그를 사용해도 된다.

...
return (
  <>
  ...
  </>
);