[React] 컴포넌트

리액트의 컴포넌트는 자바스크립트로 구현된다. 이때 최근 리액트에서는 클래스 기반 컴포넌트보다는 함수형 컴포넌트를 좀 더 권장하는 추세인데, 해당 컴포넌트는 프로그래머가 구현하기 쉽도록 JSX 등을 통해 syntactic sugar 을 제공하고 있으나, 본질적으로는 단순한 함수이다. 이런 특성을 이해하면 리액트의 몇몇 특징을 이해하기 좋다.

JSX는 Syntactic Sugar이다

웹을 어느정도 작동시키기 위해서는 html 및 자바스크립트가 필요하다. 이때 자바스크립트는 보통 논리 부분을 설계하고 구성하는데 사용되고, html은 시각적인 UI 부분을 구성하는데 사용된다. 따라서 웹 개발자의 입장에서는 UI를 구성하는데 표준처럼 사용하는 html을 그대로 사용할 수 있는 것이 좋을 것이다. JSX는 이런 흐름의 일종이라고 볼 수 있으며, JSX로 작성되는 코드들은 정말 html의 것과 유사해 보인다. 

코드상에 작성된 JSX

실제 웹상의 HTML

사용법 자체가 html과 매우 유사한 특징 덕분에 우리는 새로운 방식에 대한 진입장벽 없이 리액트를 사용할 수 있으며, 우리의 의도를 거의 동일하게 웹 상에 반영할 수 있다. 이런 특징 때문에 우리가 작성한 JSX가 약간의 수정을 거쳐 바로 웹 상에 반영되는 것은 아닐까 하는 착각에 빠질 수 있다. 그러나, 리액트의 JSX는 결코 HTML과 동등하지 않다. 이들은 리액트에서 제공하는 syntactic sugar으로, 웹에서 사용될 때는 내부적인 포팅을 거쳐 자바스크립트로 변환된 상태이다.

App 컴포넌트의 전문은 다음과 같다.

원래 작성했던 코드

함수로 변환된다는 사실 자체가 중요하다.

App.js에 작성된 JSX 코드와 최적화 및 webpack에 의해 처리된 main.chunk.js 내부의 코드는 동일한 위상을 가진다. 이때, 어딜 봐도 우리가 사용했던 JSX가 보이지 않는다. 어떻게 된 걸까?

 

리액트에서 사용하는 JSX는 리액트에 의해 다음과 같은 함수로 변환된다.

React.createElement(component, props, ...children)

특정 조건을 만족하면, react 라이브러리가 없이도 코드를 번역해준다.

jsx(component, props, ...children)
// react 라이브러리 자체를 요구하지 않으며, 성능 향상이 있다고 한다
// 우리가 이를 직접 할 수는 없음

 

아무튼, 중요한 점은 JSX는 내부적으로 함수로 처리된다는 점이다. 가령 위와 같은 JSX를 작성했다고 생각해보자.

결과 화면

단순히 JSX만 사용한 경우

위 경우, 많은 최적화 과정 때문에 React.createElement는 보이지 않으나, 여러 함수들이 중첩해서 나타난다.

 

해당 코드는 JSX 없이 다음과 같은 코드로 작성할 수 있다.

결과 화면

위의 코드는 큰 변화 없이 다음과 같은 코드로 변환된다.

일부 최적화 과정에 의해 코드가 미묘하게 다르기는 하지만, 출력되는 화면은 동일하다.

https://ko.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

https://ko.reactjs.org/docs/react-without-jsx.html

컴포넌트에서 다수의 JSX를 반환할 수 없는 이유

JSX가 사실 함수라는 것으로 부터 우리는 왜 컴포넌트가 동시에 여러개의 JSX를 반환할 수 없는지 알 수 있다. 

예를 들어 우리가 2개 이상의 JSX을 동시에 반환하려고 하는 경우, 에러를 발견할 수 있다.

위의 코드는 React.createElement로 해석하면 다음과 같다.

자바스크립트에서 다수의 변수를 "동시에" 반환할 수 있는 방법은 따로 없다. 물론, 튜플이나 배열의 형태로 반환할 수 있다지만 이것은 일종의 래퍼 변수로, 여러개의 변수를 하나의 변수로 합쳐 변환하는 것이므로 근본적으로 1개다.

위 코드의 경우에서도 <div> JSX 태그 하나는 React.createElement 하나에 대응되므로, 해당 코드는 2개 이상의 값을 반환하려고 시도하는 것과 같다. 자바스크립트의 함수는 이를 허용하지 않으므로, 당연히 불가능하다.

 

결론

JSX는 HTML같은 형태를 가지고 있지만, 컴파일 과정에서 react에 의해 단순한 자바스크립트 value로 변환된다. 이때 컴포넌트 자체가 JSX라는 단순한 자바스크립트의 객체를 반환하는 함수이므로, 여러 값을 동시에 반환할 수는 없다.

보이는 것과 다르게 JSX는 단순한 자바스크립트 객체이고, 컴포넌트는 단순한 함수라는 사실을 알고 있는 것이 좋겠다.