이제 JSX의 주제로 좀 더 들어가 보겠습니다
꼭 알아두셔야 하는 중요한 게 또 있습니다
바로 JSX와 JSX 코드 작성법입니다
여기 보시는 app.jsx 파일에서
이 return문을 함께 살펴보겠습니다
여기서 반환되는 것은 헤더와 메인 섹션을 포함하는
이 div 입니다
말하자면 이 div 안에 포함된 것은 다음과 같습니다
물론 여기서 주장할 수 있는 것은
이 div가 불필요하다는 점입니다
스타일링을 위해 필요할 수도 있지만
여기서는 그런 경우가 아닙니다
이 index.css 파일에 꼭 이 div가 필요하다는
그런 법칙은 없습니다
그렇다면 이걸 지워도 괜찮을까요?
그런데 왜 굳이 이 불필요한 요소를 그대로 두었을까요?
이게 그 이유입니다
이걸 지우는 순간 에러가 발생합니다
이 에러에 따르면 JSX 표현식은
하나의 상위 혹은 부모 요소를 가지고 있어야 합니다
즉 여기서의 문제점은 이 return문에는
여기에는 두 형제 요소를 반환하고 있다는 점입니다
한 부모 요소 안에 두 요소가 있는 형태가 아닙니다
이 때문에 문제가 됩니다
이 div 이전에 다른 div 하나를 반환했었습니다
그 div 안에는 이같은 형제 요소들이 있었습니다
이 경우는 문제가 없습니다
하지만 이처럼 형제 요소들만을 반환하는 것은
에러를 발생시킵니다
이것이 허용되지 않는 이유는
꽤 간단합니다
다른 종류의 값을 보면 알 수 있습니다
여기에서 한 번
이 genRandomInt 함수에서 임의의 숫자를
하나가 아니라 둘을 반환해 봅시다
자바스크립트에서는 값을 두 개 반환하려면
단순히 괄호로 감싼다든지
여러 줄에 걸쳐 나눈다고 되지는 않습니다
그러므로 이것은 유효하지 않은 자바스크립트 코드입니다
값을 두 개가 아닌 하나만 반환할 수 있기 때문입니다
저희가 여기서 하려고 했던 게 바로 이것입니다
여기서 저희는 값 두 개를 반환하려고 합니다
이는 꼭 기억하셔야 하는 내용인데
이 JSX 코드는 결국 말하자면
단순화된 요약본에 가깝습니다
이러한 코드는 개발에 사용할 수 있지만
저번 시간에 배우셨듯이
이것에 대해 대안이 바로
React.createElement 입니다
여기서 헤더를 생성한 후에
메인 요소도 생성하고
이후 다른 중첩 요소를 넣을 수 있습니다
이렇게 되면 이것은 유효하지 않은 코드입니다
아까도 말씀드렸듯 두 개의 값을 반환하는 것은 불가능한데
여기의 JSX 코드 두 조각 또한
결국에는 두 개의 값이라고 볼 수 있습니다
그러므로 결론적으로 일반 함수에서는 이처럼
두 개의 값을 반환할 수 없고
여기의 JSX 코드에서도 상황은 마찬가지입니다
그렇기 때문에 이 모두를 감싸는 요소 하나가 필요합니다
엄밀히 말하면 하나의 값만을 반환하기 위함입니다
그 안에 다른 값을 여러 개 집어넣을 수 있습니다
그러므로 이 div의 경우에는
이 모든 값을 감싸는 객체 혹은 배열로 생각할 수 있습니다
물론 이 한계점으로 인해
이 DOM 구조에는 div가 두 개 생길 수밖에 없습니다
개발자 도구에서 코드를 분석해 보면
여기에도 div가 하나 더 있습니다
바로 여기입니다
이 div는 앱 컴포넌트에서 가져온 것입니다
이것 자체로는 큰 문제가 되지 않지만
이처럼 DOM에 중복되는 요소가 있다는 점은
그야말로 불필요한 내용입니다
그렇기 때문에 리액트는 대안을 제공합니다
이 특수한 프래그먼트(fragment) 컴포넌트를 사용하면
루트(root) 컴포넌트가 필요한 경우
형제 컴포넌트를 감싸는 용도로 사용할 수 있습니다
하지만 화면상으로 보이는 실제 요소를 렌더링하면 안 됩니다
이를 위해 리액트에서 프래그먼트를 가져올 수 있습니다
이것은 리액트 자체적으로 내장되어 있는 컴포넌트입니다
이 프래그먼트 컴포넌트를 사용하면
div를 대체할 수 있습니다
여기 시작 태그와 종료 태그에도 사용하겠습니다
그렇게 하면 에러가 없습니다
소스 코드를 분석해 보면
여기에서도 불필요한 div가 없는 것을 확인할 수 있습니다
이 div는 index.html 파일에서 오는 것인데요
어쨌든 헤더와 주 요소는 더 이상 이 불필요한 div에 의해
감싸지지 않은 것을 확인할 수 있습니다
최신 리액트 프로젝트는
제가 보여드리는 것과 같이
심지어 더 짧은 대안을 제공하기도 합니다
여기서는 프래그먼트를 가져올 필요도 없습니다
그러나 이전 버전의 프로젝트를 다룬다면 숙지하는 것이 좋습니다
이전 버전에서는 이런 새로운 구문을 지원하지 않습니다
일단 보여드리겠습니다
최신 버전의 프로젝트에서는
코드를 이렇게만 작성하시면 됩니다
이 빈 태그는 보통
대다수의 리액트 프로젝트에서 사용 가능합니다
그리고 이 빈 태그는 프래그먼트에 대한 대안입니다
리액트에서 사용이 가능합니다
이처럼 에러가 생성되지 않는 것을 확인 가능하고
이전처럼 불필요한 div도 보이지 않는 것을
이 DOM 구조에서 확인할 수 있습니다
코드 작성을 많이 할 필요도 없습니다