[React] 간단한 동작 원리와 JAX

2023년 4월 13일

index.js 파일

React에서는 일반적으로 index.html 파일이 사용되며, 이 파일에서 React 애플리케이션의 루트 요소를 정의한다.

React 애플리케이션의 진입점인 index.js 파일에서는 다음과 같은 작업을 수행한다.

✔️  필요한 모듈을 불러온다. (대표적으로는 React와 ReactDOM이 있다.)

✔️  App 컴포넌트를 불러온다.

✔️  ReactDOM.render() 함수를 호출하여 App 컴포넌트를 렌더링한다.
(렌더링 결과물을 특정한 HTML 요소에 마운트하여 결과물이 호스팅 서버에 보여진다. )

index.html 파일에서는 기본적인 HTML 코드를 작성하고, React 애플리케이션의 루트 요소를 정의한다. 이때, 루트 요소는 보통 <div> 태그로 작성되며, React 애플리케이션이 렌더링될 곳을 지정 예를 들어, <div id="root"></div>와 같이 작성될 수 있다.

그러나, React 애플리케이션에서는 index.html 파일에서 HTML 코드를 동적으로 변경하지 않으며, React 컴포넌트에서 UI를 정의한다.

따라서, index.html 파일은 React 애플리케이션의 루트 요소를 정의하는 역할을 하지만, React 애플리케이션의 실제 UI를 정의하는 데는 사용되지 않는다.

App.js 파일

App.js 파일에서는 React 컴포넌트인 App 클래스를 정의한다.

App 컴포넌트

render() 메서드를 구현하여 JSX 코드를 반환하는데 이때, JSX 코드는 React 컴포넌트 트리를 정의한다.

다른 컴포넌트를 렌더링할 수 있으며, props와 state를 이용하여 동적으로 렌더링할 수 있다. 이러한 방식으로, React는 컴포넌트 계층 구조와 Virtual DOM을 이용하여 UI를 렌더링한다.

React 애플리케이션에서는 일반적으로 index.js 파일이 가장 먼저 실행되며, 이 파일에서 App.js 파일을 불러와서 렌더링한다.

1️⃣번) index.js 파일에서는 React와 ReactDOM을 불러온다 2️⃣번) App.js 파일을 불러온 후 ReactDOM.render() 함수를 호출하여 App 컴포넌트를 렌더링한다. 3️⃣번 렌더링 결과물을 특정한 HTML 요소에 마운트한다.

App.js 파일에서는 React 컴포넌트인 App 클래스를 정의하며, 이 클래스에서 render() 메서드를 구현하여 JSX 코드를 반환한다. 이때, JSX 코드는 React 컴포넌트 트리를 정의한다.

따라서,

1️⃣번)  React 애플리케이션에서는 index.js 파일이 가장 먼저 실행되며, 이 파일에서 App 컴포넌트를 렌더링한다. 그리고, 2️⃣번) App 컴포넌트에서는 JSX 코드를 반환하여 UI를 정의한다. 이때, HTML 파일은 React 애플리케이션에 포함되어 있으며, 3️⃣번) React 애플리케이션이 렌더링된 후에 동적으로 업데이트된다.

React와 JAX의 차이점

✔️ JAX는 XML을 이용하여 서버와 비동기적으로 데이터를 교환하는 기술을 말한다.

JAX와 React는 비슷한 점이 있지만,

AX는 데이터 교환 기술에 초점을 맞춘 반면, React는 UI 개발을 위한 라이브러리이다.

또한, React는 JAX와 달리, 컴포넌트 계층 구조와 Virtual DOM을 이용하여 UI를 효율적으로 렌더링한다.

따라서, React 애플리케이션의 동작 구조와 JAX의 동작 구조는 서로 다르다.

JAX

JAX(Javascript and XML)는 Ajax(Asynchronous Javascript and XML)와 비슷한 개념으로, XML을 이용하여 서버와 비동기적으로 데이터를 교환하는 기술을 말한다.

JAX는 일반적으로 Javascript와 XML을 사용하여 데이터를 전송하고 수신하는데 사용된다.

그러나, 최근에는 JAX 대신 JSON을 사용하는 경우가 많아졌다. JSON은 XML보다 간결하고 읽기 쉬우며, Javascript에서 쉽게 파싱할 수 있는 형식이기 때문이다.

따라서, React 애플리케이션에서도 JSON을 사용하여 데이터를 가져오는 경우가 많습니다.

React에서는 일반적으로 HTTP 요청을 보내기 위해 Fetch API 또는 Axios와 같은 라이브러리를 사용한다.

이를 통해, React 컴포넌트에서 서버로부터 데이터를 가져와 UI를 동적으로 업데이트할 수 있다.

이러한 방식으로 React는 데이터를 가져오거나 이를 활용하는 데 JAX를 사용하지 않는다는 것을 알 수 있다.