내가 리엑트를 초기에 배울 시엔 지나쳤던 부분이다.
왜 jsx문법상에서 한개 이상의 요소가 적용 될때 모든 요소들은 나란히 적용 될 수 없고, 하나의 래퍼 요소안에서 이루어질 수 밖에 없었던걸까?
그 이유를 살펴보기 위해선 이전 리엑트에서 어떻게 해서 화면에 렌더링을 할 수 있었는지부터 파악해볼 필요가 있다.
예전엔 리엑트 라이브러리를 적용하려면 React객체를 import해와야만 했다.
그 이유는 해당 컴포넌트가 반환 될때 jsx를 사용하지않고
React객체 안에 createElement() 메소드를 사용하여 구현하는 작업이 필요했기 때문이다.
호출되는 이 메소드는 jsx에 가깝다.
다음 예시를 보면,
보통 최신 jsx문법상
(생략)
return (
<div>
<h2>Let's get started!</h2>
<Expenses items={expenses} />
</div>
)위처럼 적용하여 사용한다. 이렇게 편하게 jsx문법을 사용하여 코드를 작성할 수 있지만
그 이전에는 import해온 React객체 안의 메소드인 createElement()메소드를 사용해서 구성했고,
이 createElement() 메소드는 3개의 인자를 취할 수 있다.
React.createElement(첫번째인자, 두번째인자, 세번째인자)
첫번째 인자 : 내장된 html요소라면, 생성해야할 요소를 문자열 형태로 적용한다.
두번째 인자 : 적용되는 요소의 속성을 설정하는 객체값이 적용된다. 속성이 없다면 빈객체를 적용시킨다.
세번째 인자 : 여닫는 요소안에 포함된 컨텐츠를 적용시킨다.(한개 이상인경우 쉼표로 이어 가질 수 있다)
추가로, 세번째 인자에 적용되는 컨텐츠가 또 다른 각각의 요소로 포함되어있을 경우 React.createElement()를 또 다시 적용해 주어 위 내용을 반복하면 된다.
만약 첫번째 인자로 들어갈 요소가 html내장 요소가 아닌 사용자 지정 컴포넌트라면, 문자열로 적용하지않고 임포트한 이름만 그대로 적용시켜주면 된다. (컴포넌트는 함수 그 자체이므로)
아래는 jsx문법이 아닌 리엑트 객체의 메소드를 적용한 코드이다.
(생략)
return React.createElement(
"div",
{},
React.createElement("h2", {}, "Let's get started!"),
React.createElement(Expenses, { items: expenses })
)위처럼 작성 할 수 있겠지만, jsx보다 좀 더 복잡해 보이고 번거로워 보인다.
최신 리엑트 셋업에서는 리엑트 입포트를 생략해도 리엑트 객체 문법을 jsx로 변환이 가능하게 해주기 때문에 굳이 적을 필요는 없다.
예전에야 그것이 꼭 필요하여 임포트를 해줘야만 했고, 그런 이유때문에 jsx코드를 사용하는 모든 컴포넌트에 추가했다.
이제는 기술적으로 그렇게 할 필요는 없지만 중요한건 jsx코드를 사용할때 리엑트가 사실은 내부에서 사용되고 있는 점만 알고 있어도 충분할것 같다.
이 내용을 알아봤던 핵심은
한개 이상의 반환되는 요소를 나란히 적용하지 못하고 왜 루트 jsx요소로 일부 래핑하는 요소가 필요하는가였고,
그 이유로는
React.createElement 체계에서 한개 이상의 자식요소를 가질 수 있는 요소 한개를 생성해야 하기 때문인 것이다.
