제목: 리액트에서 “표현식은 단일 부모 요소를 가져야 합니다” 오류를 수정하는 방법
리액트에서 코드를 작성하는 중에 종종 오류가 발생하는데, “표현식은 단일 부모 요소를 가져야 합니다” 오류가 그 중 하나입니다. 이 오류는 단일 부모 요소로 감싸지지 않은 여러 요소나 컴포넌트가 있는 경우 발생합니다. 이 기사에서는 이 오류가 발생하는 원인을 살펴보고 이를 해결하기 위한 여러 가지 해결책을 제공하겠습니다.
오류 이해하기
먼저 이 오류가 왜 발생하는지 알아보겠습니다. 리액트에서 JSX를 렌더링할 때는 단일 부모 요소나 컴포넌트를 반환해야 합니다. 리액트는 가상 DOM을 효율적으로 렌더링하고 병합하기 위해 하나의 루트 요소를 기대합니다. 부모로 감싸지 않은 여러 요소나 컴포넌트가 있을 경우, 리액트는 “표현식은 단일 부모 요소를 가져야 합니다” 오류를 발생시킵니다.
해결책 1: 배열 사용하기
이 오류를 해결하는 한 가지 방법은 요소나 컴포넌트를 배열에 넣는 것입니다. 이렇게 하면 효율적인 렌더링을 위해 각 요소에 키를 할당할 수 있습니다.
{this.props.mail ?
[
<Route key={0} path="inbox" component={Inbox} />,
<Route key={1} path="contacts" component={Contacts} />
]
: null}
요소를 배열로 묶음으로써 리액트는 이를 단일 개체나 부모 요소로 간주하여 오류를 해결합니다.
해결책 2: 간단한 프래그먼트 활용하기
리액트의 최신 버전에서는 간단한 프래그먼트를 사용하여 자식 목록과 조건부 렌더링에 논리적인 ‘&&’ 연산자를 함께 사용할 수 있습니다. 이 접근 방식은 더 깔끔하고 간결한 방법으로 오류를 처리할 수 있습니다.
{this.props.mail &&
<>
<Route path="inbox" component={Inbox} />,
<Route path="contacts" component={Contacts} />
<>
}
간단한 프래그먼트 구문(<>)을 사용하여 추가적인 래핑 요소 없이 여러 요소를 반환할 수 있습니다.
해결책 3: 프래그먼트 태그로 감싸기
최신 버전의 리액트를 사용하지 않는 경우, 전통적인 <React.Fragment> 태그를 사용하여 요소나 컴포넌트를 감싸는 방법을 사용할 수 있습니다.
{this.props.mail ?
<>
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
<>
: null }
<> 또는 <React.Fragment>를 부모 래퍼로 사용하면 추가적인 DOM 노드를 도입하지 않고 여러 요소나 컴포넌트를 포함할 수 있습니다.
해결책 4: div로 감싸기
다른 해결 방법은 요소나 컴포넌트를 <div> 태그로 감싸는 것입니다. 이 접근 방식은 추가적인 DOM 노드를 도입하지만 오류를 해결하는데 도움이 될 수 있습니다.
<div>
<Route path="inbox" component={Inbox} />
<Route path="contacts" component={Contacts} />
</div>
<div> 태그로 요소를 감싸면 리액트의 렌더링 요구 사항을 충족하는 단일 부모 요소가 제공됩니다.
결론
“표현식은 단일 부모 요소를 가져야 합니다” 오류는 리액트를 사용할 때 일반적으로 마주칠 수 있는 장애물입니다. 배열 사용, 간단한 프래그먼트, <div>나 <React.Fragment>로 요소를 래핑하는 등 이 기사에서 언급된 해결책을 따르면 이 오류를 극복하고 깔끔하고 효율적인 리액트 코드를 작성할 수 있습니다.
앞으로 이 오류를 방지하기 위해 JSX 표현식에는 항상 단일 부모 요소가 있는지 확인해야 합니다.
