이번 글에서는 Adjacent JSX elements must be wrapped in an enclosing tag. 에러 해결 방법에 대하여 알아보겠습니다.
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
[에러가 발생한 코드]
import React, { Component } from 'react';
class TestComponent extends Component {
constructor(props) {
super(props);
this.state = {test: '코딩병원'};
}
render() {
return(
<p>{this.state.test}</p>
<span>119</span>
);
}
}
export default TestComponent;
[에러 원인]
element 반환 시 하나의 <html> 태그로 감싸지 않으면 발생합니다.
즉, <p> 태그와 <span> 태그가 하나의 태그로 감싸져 있지 않기 때문입니다.
[해결 방법]
1. <div></div> 태그로 감싸줍니다.
<div>
<p>{this.state.test}</p>
<span>119</span>
</div>
2. Fragment를 사용합니다.
<React.Fragment>
<p>{this.state.test}</p>
<span>119</span>
</React.Fragment>
<Fragment> 태그를 약식으로 아래와 같이 사용할 수 있습니다. <>~</>
<>
<p>{this.state.test}</p>
<span>119</span>
</>
출력 화면
