return (
<Comp1 />
<Comp2 />
)이렇게 입력을 하게되면 아래와 같은 오류가 났다는 것을 콘솔창에서 확인할 수 있다.
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?이 오류 내용은 '인접한 JSX 요소는 둘러싸는 태그로 래핑되어야 합니다. JSX 조각 <>...</>을 원하십니까?' 라는 의미이다.
콘솔창에서 끝에 <>...</>? 라고 친절하게 언급해줬기 때문에 이 내용을 적용하면 어떻게 될까?
아래 코드처럼 추가해도 문제가 해결되지 않는다.
return (
<>
<Comp1 />
<Comp2 />
</>
)<></>가 안먹는다면 <div></div>로 묶어주면 된다.
단지 <></>는 비교적 최신문법이라서 지원이 안되는 경우가 있기 때문이다.
1. 리액트에서 <div></div>는 왜 해주는 걸까?
리액트를 기반으로 개발된 프로젝트들의 코드를 뜯어보다보면 의미없는 루트 요소를 div로 정의한 코드들을 확인할 수 있다.
리액트 뿐만 아니라 거의 모든 언어에서 함수/메서드가 여러 매개변수를 사용할 수 있지만, 항상 하나의 값만 반환한다. 그래서 createElement()로 여러 형제 요소를 반환하려고 할 때 문제가 발생하게 된다.
따라서 사용되지 않는 div를 쓰는 이유는, 리액트에서 정의한 render() 함수는 반환값의 루트 요소가 하나만 정의되어야 하기 때문이다.
2. <div></div>와 <></>의 차이는? 그리고 이것의 정체는?
<></>는 <Fragment>의 축약표현이다.
2017년 React v16.2.0부터 개선된 부분으로, 의미없이 div로 감쌀 필요를 없앤 것이다. Fragment는 DOM에 필요이상의 노드를 추가하는 것 없이 자식리스트 그룹을 만들게 할 수 있다.
<></>가 비교적 최신문법이라서 지원이 안되는 경우가 있기 때문에 div를 사용하는 것이 안정적인 것 같다.
<div></div> => <React.Fragment /> => <></> 순으로 기능추가가 되고 있어서 가운데 껴 있는 <React.Fragment />를 선택하는게 나을 수도 있을 것 같다. <React.Fragment />도 DOM구조에 반영되지 않는 방법이기 때문이다.
그렇지만 <React.Fragment />도 React v16 이상부터 지원되므로 역시나 실행해보고 써봐야할 것 같다.
