React 작동 방식 – React Vernacular Movement 05

코멘트를 남겨주세요 / 언어적 움직임에 반응, 기술 기사
리액트 작동 방식

목차

머리말

React는 웹 및 모바일 프런트엔드 개발에 가장 널리 사용되는 JavaScript 패키지 중 하나입니다.Meta(이전 Facebook)에서 개발한 React를 사용하면 개발자는 재사용 가능한 구성 요소를 만들어 프런트 엔드 페이지를 완성할 수 있습니다.

그러나 엄밀히 말하면 React는 프레임워크가 아니라는 점에 유의해야 합니다. 이는 UI 요소 렌더링만 담당하기 때문입니다. 그러나 React는 Angular 및 Vue와 같은 프레임워크를 위한 또 다른 솔루션을 제공하므로 이를 통해 복잡한 프런트엔드 페이지 기능을 완성할 수 있습니다.

이 기사에서는 React의 작동 방식, 기능, 프론트엔드 개발자를 위한 React.js 사용의 이점에 대해 설명합니다.

프론트엔드 프레임워크가 필요한 이유는 무엇입니까?

이 질문에 답하면서 '왜 프런트엔드 프레임워크를 사용해야 하는가?'라는 질문에 대해 생각해 볼 수도 있습니다. 웹 개발 분야에서 프론트엔드 프레임워크는 실제로 현대적인 도구이며, 어떤 기술이나 도구이든 특정 문제를 해결하기 위해 개발되었습니다. 이전 웹 페이지에서는 정적 페이지를 완성하려면 HTML, CSS, 심지어 일부 JavaScript만 필요했습니다.

그러나 기술이 점점 발전하고 인터넷을 사용하는 사람들이 많아지면서 회원가입, 로그인, 지도기능, 포럼 게시 기능 등 웹페이지 기능은 점점 더 복잡해지고 있습니다. 간단한 작업으로 웹페이지에서 해결할 수 있습니다.

따라서 프론트엔드 엔지니어와 백엔드 엔지니어가 UI, UX, 시각적 인터페이스, 데이터 및 상태 시각화 등을 담당합니다. 백엔드 엔지니어는 데이터 처리, 데이터베이스 운영, 서버 관리, API 개발 등을 담당합니다.

또한 페이지가 점점 복잡해지면서 JavaScript나 Jquery를 사용하여 다양하고 복잡한 프런트엔드 상태를 처리할 수 있는 방법이 더 이상 없기 때문에 프레임워크가 탄생했습니다.

React, Vue 및 Angular는 복잡한 프런트엔드 상태를 처리하기 위해 개발되었습니다.

리액트 자바스크립트란 무엇인가요?

React는 모듈 방식으로 프런트 엔드 인터페이스를 생성할 수 있는 강력한 JavaScript 제품군입니다. 선언적 및 모듈식 접근 방식을 도입하여 프런트 엔드 UI 개발에 혁명을 일으켰습니다.

jQuery의 DOM 조작과 달리 React는 Virtual DOM을 사용하여 성능을 최적화합니다. React JavaScript(또는 React.js)는 복잡한 프런트엔드 화면을 처리하여 개발자에게 체계적이고 효율적인 접근 방식을 제공합니다.

리액트 작동 방식?

React는 JavaScript와 HTML 코드를 완벽하게 결합하는 구문 설탕인 JSX를 도입합니다. JSX 태그는 XML과 유사하지만 몇 가지 차이점이 있습니다.

예: React는 CSS의 기존 클래스 속성 대신 className을 사용합니다. 숫자값과 표현식은 중괄호로 묶이고, 따옴표는 자바스크립트와 마찬가지로 문자열을 나타냅니다.

반응 요소

React는 내장된 함수를 통해 다양한 HTML DOM(Document Object Model)을 생성할 수 있으므로 먼저 기본 HTML 구문을 살펴보겠습니다.

				
					<body> 
    <h1>안녕하세요 세계</h1> 
    <ul> 
        <li>개</li> 
        <li>고양이</li> 
    </ul> 
</body>

위의 HTML 구조를 보면 HTML 요소 모니터링이 트리 구조로 연결되어 있고 루트 요소(root 요소)와 두 개의 하위 요소(자식 요소)가 있음을 알 수 있습니다. h1, 두 번째 하위 요소는 다음과 같습니다. 울, 그리고 자세히 보면 울 목록으로 보면,울 또한 두 개의 요소를 포함하는 상위 요소이기도 합니다. 리 하위 요소.

우리는 이러한 DOM을 사용하여 브라우저에 페이지의 모양을 알려주므로 React의 개념은 동일합니다. React에서 개발한 기능을 통해 이러한 요소를 만든 다음 이러한 요소를 큰 HTML로 결합하여 페이지를 표시합니다. .

DOM에 반응하다

요소를 생성한 후에는 생성된 DOM을 페이지에 렌더링해야 합니다. 이 작업을 Render라고 합니다. ReactDOM의 내장 렌더링을 사용하여 우리가 만든 React 요소를 브라우저에 렌더링할 수 있습니다.

				
					const 접시 = React.createElement("h1", "Hello World"); ReactDOM.render(dish, document.getElementById("root"));

위의 JavaScript 코드를 통해 먼저 HTML 요소가 다음과 같이 생성됩니다.그리고 이 요소를 HTML로 전달합니다.

				
					<div id="root"> 
    <h1>안녕하세요 세계</h1> 
</div>

물론 위의 내용은 단일하고 비교적 간단한 DOM입니다. 여기서는 ReactDOM의 render list 메서드로 생성된 HTML 예제도 제공합니다.

				
					const hello = React.createElement("h1", "Hello") const world = React.createElement("h1", "World") ReactDOM.render([hello, world], document.getElementById("root"))

React.js를 사용하는 이유는 무엇입니까?

전 세계 수백 개의 대기업이 React를 사용하여 자체 시스템을 구축하고 있습니다. React를 사용하면 얻을 수 있는 이점이 아래에 간략하게 소개됩니다.

사용하기 쉬운

일반적으로 JavaScript 기술을 갖춘 웹 개발 엔지니어는 React 사용 방법을 빠르게 배울 수 있습니다. 왜냐하면 React는 Pure JavaScript에 의존하고 모듈식 및 객체 지향 개념을 가지고 있어 상대적으로 시작하기 쉽기 때문입니다.

JavaScript를 더 배워야 한다면 많은 웹사이트에서 무료 튜토리얼을 제공합니다. 먼저 JavaScript의 기본 사항을 이해한 다음 React를 읽어 프런트 엔드 개발 프로세스를 단순화할 수 있습니다.

재사용 가능한 구성 요소

React를 사용하면 구성 요소를 다른 애플리케이션의 구성 요소로 재사용할 수 있습니다. 예를 들어, 특정 페이지에 대한 양식을 개발한 경우 이를 다른 페이지에서 사용해야 하는 경우 다시 개발할 필요 없이 양식의 구성 요소를 직접 사용할 수 있습니다.

또한 React는 너무 많은 코드 없이도 복잡한 기능을 완성하기 위해 다른 구성 요소 내에서 더 작은 구성 요소를 계속 사용할 수 있습니다. 각 React 구성 요소에는 자체 상태가 있으므로 유지 관리가 더 쉽습니다.

간단한 프런트엔드 구성요소 구현

React는 JavaScript 객체를 HTML 구문 및 마크업과 결합합니다. JSX를 통해 구성 요소를 작성하고 기존 HTML 페이지에 React를 추가할 수도 있습니다(이 용어는 이후 장에서 설명합니다). JSX는 다기능 프리젠테이션을 단순화하고 시스템 기능을 제한하지 않고 코드를 단순하게 유지합니다.

고성능

Virtual Dom을 사용하면 React가 DOM 트리를 빠르게 업데이트할 수 있습니다. 특별한 메커니즘과 알고리즘을 통해 React는 성능에 영향을 미치는 과도한 재렌더링을 피할 수 있습니다.

검색 엔진 최적화

React는 성능을 향상하고 JavaScript 코드 로드 시간을 단축하여 대기 시간을 개선하고 검색 엔진 최적화(SEO)를 향상시킵니다. Virtual DOM의 구현은 페이지 속도를 높이는 데 도움이 됩니다.

또한 서버 측을 통해 SEO를 최적화할 수도 있습니다. 검색 엔진이 이러한 사이트를 크롤링하기 어렵고 시간이 많이 걸리는 경우가 많기 때문에 JavaScript 전용 웹 사이트가 직면한 문제 중 하나를 해결합니다.

결론

이 글은 공식적으로 React의 세계에 입문하여 JavaScript를 통해 HTML DOM을 생성하고 이를 페이지로 전환하는 방법을 포함하여 React가 작동하는 방식을 설명합니다.

React 팀의 지속적인 개선을 통해 React는 Bootstrap, Tailwind CSS, Axios, Redux 및 Firebase를 포함한 다양한 기술과 더 쉽게 사용하고 통합할 수 있습니다.

Node.js 및 NGINX의 도움으로 VPS에 React 애플리케이션을 배포하는 것도 쉽습니다.

제안사항이나 질문이 있으시면 메시지를 남겨주세요!

이 글이 마음에 드셨다면 더 많은 분들이 보실 수 있도록 좋아요와 공유 부탁드립니다~

인용하다

React Vernacular Movement 06-React 작동 원리

리액트 토속 스포츠 시리즈

JavaScript 고차 함수 – React Vernacular Movement 04

JavaScript Async Await – React Vernacular Movement 03

JavaScript ES6 객체 – React Vernacular Movement 02

JavaScript ES6 – React Vernacular Movement 01

코멘트를 남겨주세요

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

ko_KR한국어
zh_TW繁體中文 en_USEnglish zh_CN简体中文 ja日本語 es_ESEspañol ko_KR한국어