Return root level

둘 이상의 'root' JSX 요소를 반환할 수 없다.
(변수에 둘 이상의 'root' JSX 요소를 저장할 수도 없다)

하나의 요소만 가질 수 있다.

물론 children은 더 가질 수 있다.

 

왜 하나의 요소만 저장하거나 리턴할 수 있을까?
자바스크립트에서는 하나 이상 리턴할 수 없기 때문!!

return (
    <h2> Hi there! </h2>
    <p> This does not work :-( </p>
)

⬇️⬇️⬇️

return (
    React.createElement('h2', {}, 'Hi there!')
    React.createElement('p', {}, 'This does not work :-(')
)

 

💡 여러 요소를 리턴 하고 싶은 경우엔 어떻게 할까?

1) 하나의 배열 값으로 리턴하자. (요소 마다 key 지정 필요.)

 return [
    true && <Modal key='modal'/>,
    <div key='basic-div'>
      <h2> Hi there! </h2>
      <p> This does not work :-( </p>
    </div>
  ];

 

2) 항상 요소들을 하나의 태그로 감싸자. ( <div> 태그 등)

return (
  <div>
    <h2> Hi there! </h2>
    <p> This does not work :-( </p>
  </div>
)

❗️ 문제점 : 불필요하게 렌더되는 div가 생긴다.

return (
  <div>
    <div>
        <div>   
            <h2> Hi there! </h2>
          </div>
    </div>
  </div>
)

더 큰 App들 에서는, 페이지에 의미나 구조를 추가하지 않지만, 'React's/JSX' 요구 사항 때문에 존재하는 수많은 불필요한 div (또는 기타 요소)가 쉽게 생길 수 있다.

이로 인해, 스타일이 깨지거나 많은 html요소를 렌더링하게 되어 app이 느려질 수 있다.

 

3) wrapper를 만들어 사용하자. (2번 해결방안)

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

export default Wrapper;

단순히 props.children을 리턴하는 wrapper를 만들어,

루트 태그가 필요한 곳에 div 등 불필요한 태그들 대신 wrapper로 감싸 주면 된다.

➡️ React에서 wrapper역할을 이미 제공하고 있으니, wrapper를 만들어 보는 건 연습으로만 추천한다..ㅎㅎ

 

• React.Fragment 사용 (react에서 제공, 항상 정상 작동)

return ( 
  <React.Fragment>
      <h2> Hi there! </h2>
      <p> This does not work :-( </p> 
  </React.Fragment> 
)

 

• '<></>' 사용 (빌드 워크플로우가 지원해야만 가능하기 때문에 프로젝트 환경에 따라 작동이 안될 수 있다.)

return (
  <>
    <h2> Hi there! </h2>
    <p> This does not work :-( </p>
  </>
)

 

 

참고자료 : udemy React 강의.