JSX 및 렌더링 요소 이해하기 - ReactJS

"30일 ReactJS" 챌린지 3일차에 오신 것을 환영합니다! 오늘은 React의 핵심 개념 중 하나인 JSX에 대해 알아보겠습니다. 이 게시물을 마치면 JSX에 대한 확실한 이해와 React가 이를 사용하여 웹 페이지의 요소를 렌더링하는 방법을 알게 될 것입니다.

JSX란 무엇인가요?
JSX는 JavaScript XML을 의미합니다. 이는 JavaScript 파일 내에 HTML과 유사한 코드를 작성할 수 있게 해주는 JavaScript용 구문 확장입니다. JSX를 사용하면 앱의 논리와 구조를 혼합하여 코드에서 직접 UI 구성요소를 더 쉽게 만들고 시각화할 수 있습니다.

JSX 작동 방식
JSX를 작성할 때 HTML과 JavaScript를 혼합하여 작성하게 됩니다. React는 이를 가져와 UI를 나타내는 표준 JavaScript 객체로 변환합니다.

기본적인 예는 다음과 같습니다.

const element = <h1>Hello, world!</h1>;

이 코드 줄은

"Hello, world!"라는 텍스트로 태그를 지정하세요.

JSX는 HTML이 아닙니다
JSX가 HTML과 많이 비슷해 보이지만 완전히 똑같지는 않다는 점을 기억하는 것이 중요합니다. JSX는 React가 요소를 생성하는 데 사용하는 구문 설탕입니다.

예를 들어 HTML에서는 클래스와 같은 속성을 사용하여 CSS 클래스를 적용합니다.

<h1 class="header">Hello, world!</h1>

하지만 JSX에서는 class 대신 className을 사용해야 합니다. class는 JavaScript의 예약어이기 때문입니다.

const element = <h1 className="header">Hello, world!</h1>;

JSX에 표현식 삽입
JSX의 강력한 기능 중 하나는 JavaScript 표현식을 JSX 내에 직접 포함할 수 있다는 것입니다. 이를 통해 앱의 로직을 기반으로 콘텐츠를 동적으로 생성할 수 있습니다.

예:

const name = 'Meraj';
const element = <h1>Hello, {name}!</h1>;

여기서 {name}은 평가되어 name 변수의 값으로 대체되어 'Hello, Meraj!'로 렌더링되는 JavaScript 표현식입니다. 화면에.

React의 렌더링 요소
React에서 요소 렌더링은 페이지에 콘텐츠를 표시하는 프로세스입니다. React 요소는 앱 UI의 구성 요소입니다.

요소를 렌더링하려면 ReactDOM.render() 메서드를 사용합니다. 이 메소드는 두 가지 인수를 사용합니다:

1. 렌더링하려는 React 요소
2. 렌더링하려는 DOM 요소.

"Hello, world!"를 렌더링하는 방법은 다음과 같습니다. 예:

import React from 'react';
import ReactDOM from 'react-dom/client';

const element = <h1>Hello, world!</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

이 코드는 React에게 루트 ID를 가진 HTML 요소 내부의 요소를 렌더링하도록 지시합니다.

React 가상 DOM의 위력
React는 가상 DOM을 사용하여 UI 변경 사항을 효율적으로 관리합니다. 요소를 업데이트하면 React는 새 버전을 이전 버전과 비교하고 변경된 실제 DOM 부분만 업데이트합니다. 이러한 접근 방식은 React를 빠르고 효율적으로 만듭니다.

실제 예: 쇼핑 목록
화이트보드에 적힌 쇼핑 목록을 생각해 보세요. 하나의 항목을 변경해야 하는 경우 전체 목록을 지우고 다시 작성하지 마십시오. 변경된 특정 항목을 업데이트하면 됩니다. React의 가상 DOM도 비슷하게 작동하여 변경이 필요한 부분만 업데이트합니다.

JSX를 사용하는 이유

• 읽기 쉬운 코드: JSX를 사용하면 읽기 쉽고 이해하기 쉬운 방식으로 구성 요소를 작성할 수 있습니다. 코드에서 UI 구조를 직접 확인할 수 있습니다.
• 적은 코드: JSX를 사용하면 React.createElement()를 사용하여 요소를 수동으로 생성하는 것보다 적은 코드를 작성할 수 있습니다.
• JavaScript와의 통합: JSX는 JavaScript의 구문 확장이므로 UI ​​코드 내에 로직을 직접 삽입할 수 있습니다.

Vite로 JSX 설정
개발을 위해 Vite를 사용하고 있기 때문에 좋은 소식은 Vite가 JSX를 즉시 지원하도록 사전 구성되어 있다는 것입니다. 즉, 추가 설정 없이 즉시 JSX 작성을 시작할 수 있습니다.

2일차의 단계를 따랐다면 Vite 프로젝트가 이미 설정되어 있습니다. JSX로 구성 요소 생성을 시작하고 즉시 렌더링되는 것을 확인할 수 있습니다.

결론
JSX는 HTML과 JavaScript 사이의 격차를 해소하는 강력한 도구로, React를 사용하여 동적이고 대화형 UI를 더 쉽게 구축할 수 있게 해줍니다. JSX의 작동 방식과 React가 JSX를 사용하여 요소를 렌더링하는 방법을 이해하면 React 개발 여정을 위한 강력한 기반이 마련됩니다.

내일은 React 애플리케이션의 핵심 구성 요소인 구성 요소와 Prop에 대해 자세히 알아보겠습니다.

위 내용은 JSX 및 렌더링 요소 이해하기 - ReactJS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!