React는 오랫동안 인기 있는 JavaScript 라이브러리였으며 전 세계에서 가장 인기 있는 라이브러리 중 하나입니다. 또한 Next.js 및 Remix와 같은 인기 있는 프레임워크가 React를 기반으로 구축되고 React-Native를 사용하여 모바일 개발을 수행할 수 있는 기능을 갖춘 이 라이브러리는 조만간 사라지지 않을 것입니다. 그러나 이것의 문제는 대부분의 초보자가 React에 모여들고 그것이 어떻게 작동하는지 제대로 이해하지 못한 채 배우기 시작한다는 것입니다. 그럼 본격적으로 살펴보겠습니다.

JSX 작동 방식

React에서 JSX(JavaScript XML)는 HTML과 유사해 보이지만 JavaScript 내에서 작동하는 구문입니다. 유효한 JavaScript 자체가 아니므로 React는 JSX를 표준 JavaScript로 변환하기 위해 트랜스파일러(보통 Babel)를 사용합니다. 이 JavaScript 코드는 브라우저가 최종적으로 해석하는 것입니다.

JSX를 작성하면 React.createElement() 함수 호출로 변환됩니다. 이러한 함수 호출은 React 애플리케이션의 구성 요소인 React 요소를 생성합니다. 각 요소는 UI의 일부를 나타냅니다.

다음은 그 예입니다.

React 구성요소의 JSX

const element = (
  

    
Hello, React!
    
This is a paragraph.
  
);

JSX를 JavaScript로 변환:

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello, React!'),
  React.createElement('p', null, 'This is a paragraph.')
);

React는 중첩된 React.createElement() 호출을 가져와 브라우저 DOM의 해당 HTML 요소로 변환합니다.

결론

JSX를 사용하면 HTML과 유사한 구문을 작성할 수 있으므로 React 구성 요소를 더 쉽게 작성할 수 있지만 JavaScript를 사용하여 앱의 구조를 생성하는 React.createElement() 호출에 대한 구문 설탕일 뿐입니다. 이것이 바로 React가 Virtual DOM 메커니즘을 통해 UI를 효율적으로 관리할 수 있게 해주는 것입니다.

이 기사가 마음에 드셨다면 제가 매주 여러분과 같은 개발자에게 보내드리는 무료 뉴스레터도 읽어보실 수 있습니다. 여기에서 가입하실 수 있습니다.