[React] JSX 자세히 보기

SuamKang·2023년 6월 15일
0

React

목록 보기
5/34
post-thumbnail
post-custom-banner

내가 리엑트를 초기에 배울 시엔 지나쳤던 부분이다.

왜 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 체계에서 한개 이상의 자식요소를 가질 수 있는 요소 한개를 생성해야 하기 때문인 것이다.

profile
마라토너같은 개발자가 되어보자
post-custom-banner

0개의 댓글