반응의 길

Dec 01 2022

React는 웹 애플리케이션 구축에 사용되는 최고의 Javascript 라이브러리 중 하나입니다. React를 파악하려면 후드 뒤에서 작동하는 방식을 이해해야 합니다.

Unsplash에 있는 Ksenia Yakovleva의 사진

React는 웹 애플리케이션 구축에 사용되는 최고의 Javascript 라이브러리 중 하나입니다. React를 파악하려면 후드 뒤에서 작동하는 방식을 이해해야 합니다. 이 기사에서는 React 기본 사항, 원시 React API, 내부 작동 방식을 살펴보고 마지막으로 재사용 가능한 React 구성 요소를 생성해 보겠습니다.

Javascript 및 HTML DOM 개념에 대한 기본적인 이해가 있다고 가정합니다. 그렇지 않은 경우 여기에서 이러한 개념을 살펴볼 수 있습니다: Javascript Guide , Introduction to the DOM .

이제 본론으로 들어가겠습니다!!

웹 페이지는 어떻게 만들어지나요?

웹이 어떻게 작동하는지 궁금한 적이 있습니까? 웹 사이트 URL을 입력하고 Enter를 클릭하면 어떻게 됩니까? 화면에서 해당 웹 페이지를 어떻게 볼 수 있습니까? 단계별로 살펴보겠습니다.

1. 웹사이트를 검색하면 HTTP 요청이 서버로 전송됩니다.

2. 서버에서 웹사이트 파일을 보냅니다.

3. 브라우저가 이 파일을 구문 분석합니다. 먼저 HTML 파일을 파싱한 다음 CSS 및 JavaScript 파일을 파싱합니다.

4. 브라우저는 파싱된 HTML에서 DOM을 빌드하고 화면에 표시합니다.

이것은 웹 페이지가 화면에 표시되는 방식입니다(DNS 서버 및 HTTP 프로토콜과 같은 다른 개념이 있지만 이는 우리의 관심 영역이 아닙니다). 그렇게 간단하지만, 이 DOM은 무엇입니까? 어디에서 왔습니까? DOM을 조금 살펴볼까요?

DOM은 논리적 트리가 있는 HTML 문서를 나타내는 문서 개체 모델을 나타냅니다. 각 분기에는 노드가 포함되고 각 노드에는 객체가 포함됩니다. DOM 메서드는 DOM에 대한 액세스를 허용합니다. 이러한 방법을 사용하여 문서의 구조와 내용을 변경할 수 있습니다.

우리 모두 알다시피 HTML은 웹의 기본 구성 요소이며 HTML을 사용하여 웹 페이지를 만들 수 있습니다. "Hello world!!"를 표시하는 간단한 웹 페이지를 만들어 봅시다. 아래 그림과 같이:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

javascript가 DOM과 상호 작용할 수 있도록 하려면 HTML 파일에 스크립트 태그를 추가해야 하며 DOM에서 요소를 생성, 삭제 또는 업데이트하는 코드를 작성할 수 있습니다(이를 DOM 조작이라고 함).

위에서 생성한 “Hello World!!”와 상호작용하는 자바스크립트 코드를 살펴보자. 페이지를 열고 내용을 "Wassup World!!"로 변경합니다.

Javascript로 HTML 요소 만들기:

javascript를 통해 HTML 요소를 수정할 수 있음을 확인했으므로 id가 "root"이고 div 의 자식이 h1인 div를 포함하는 웹 페이지를 만들어 봅시다 . h1 에는 "Hello World!!"가 포함되어 있습니다. 코드는 아래 샌드박스에서 찾을 수 있습니다.

그러나 Javascript를 통해 요소를 만드는 것은 필수적입니다. 이 작업을 수행하려면 Javascript에 단계별 지침을 제공해야 합니다. 예를 들어 id가 있는 div를 만들려면 먼저 해당 div 요소를 만든 다음 id 특성을 설정하고 마지막으로 이 div를 부모에 추가해야 합니다. 이미 너무 많은 일입니다. 요소를 생성하는 방법(선언적 접근 방식)이 아니라 생성할 요소만 JavaScript에 알려주는 방법이 있다면 어떨까요? 많은 JavaScript 코드를 줄입니다. 멋지죠? 그러나 우리는 그것을 어떻게 달성합니까? 이 명령적이고 선언적인 접근 방식은 무엇입니까?

명령형 프로그래밍은 무언가를 수행하는 방법 이고 선언적 프로그래밍은 수행하는 것과 더 비슷합니다. 다음은 명령형 프로그래밍과 선언형 프로그래밍 에 대한 아름다운 기사입니다 .

React는 선언적 언어입니다. 즉, 내부에서 어떻게 발생하는지 걱정하지 않고 코드를 작성할 수 있습니다.

이제 선언적 프로그래밍이 우리의 삶을 어떻게 더 쉽게 만들어주는지 살펴보겠습니다.

React API 개요:

React API에는 DOM을 조작하기 위한 메서드가 포함되어 있습니다. 예: React.createElement() 및 ReactDOM.render(). React.createElement() 메서드를 document.createElement() 및 ReactDOM.render() as document.append()와 동등하다고 생각하세요. 이러한 방법을 자세히 살펴보겠습니다.

React.createElement()는 생성할 요소와 소품이라는 두 가지 인수를 취합니다. ID가 "root"이고 텍스트가 "Hello World!"인 간단한 div 태그를 생성하려는 경우 그 안에는 다음과 같이 보일 것입니다.

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React는 코드에서 React를 사용하기 위한 출발점입니다. npm을 통해 패키지로 설치하거나 unpkg.com 에서 제공되는 스크립트 파일을 사용할 수 있습니다 . 설치에 대해 신경 쓸 필요가 없으므로 샘플 코드에서 스크립트 파일을 사용하겠습니다.

이제 동일한 "Hello World!!"를 다시 만들어 보겠습니다. React API가 있는 페이지.

React.createElement()의 children prop은 일반 텍스트이거나 다른 요소일 수 있습니다. 이것이 중첩 요소를 만드는 방법입니다. 설명을 위해 다음 HTML 코드를 고려하십시오. 다른 div를 자식으로 포함하는 컨테이너로서의 div . 자식 div 태그에는 "Hello" 및 "World"라는 텍스트가 있는 두 개의 span 태그가 포함되어 있습니다. codeSandbox 링크

React API로 중첩 요소 생성

중첩 요소를 생성하려면 중첩 메서드를 사용해야 하므로 코드를 읽고 이해하기가 매우 어렵습니다.
따라서 더 읽기 쉬운 코드가 필요합니다. 코드를 읽을 수 있게 만드는 다른 방법이 있습니까? React API를 사용하는 대신 HTML과 같은 구문을 작성할 수 있다면 어떨까요? 여기서 JSX가 등장합니다. 잠시 시간을 내어 JSX에 대해 알아보겠습니다.

JSX:

JSX는 원시 React API에 대한 구문 설탕인 HTML과 유사한 구문(HTML은 아님)입니다. JSX를 사용하여 이러한 모든 React 메서드를 HTML과 같은 간단한 구문으로 작성할 수 있습니다.

JSX는 Javascript가 아니므로 브라우저에서 이해할 수 있는 JavaScript로 변환해야 합니다.

Babel은 JSX를 Javascript로 변환하는 변환기입니다. 모든 JSX는 아래와 같이 Babel에 의해 React API로 변환됩니다.

JSX를 Javascript로 변환하는 Babel

이전 이미지에서 볼 수 있듯이 <div id=”root”>는 React.createElement(“div”,{id:”root”},children) 로 변환됩니다 . 이것이 Babel이 JSX를 React API로 변환하는 방법입니다.

프로젝트에서 Babel을 사용하려면 unpkg.com 의 스크립트 파일을 사용해야 하며 type=” text/babel”을 언급하는 스크립트 태그 내부에 JSX 작성을 시작할 수 있습니다 . 명확성을 위해 아래 샌드박스를 참조할 수 있습니다.

Javascript를 통해 DOM을 명령적으로 수정하는 단계에서 JSX를 사용하는 단계까지 왔습니다. Javascript와 달리 JSX를 사용하는 동안 요소를 만드는 방법에 대해 신경쓰지 않습니다. 그것들을 DOM을 수정할 React API로 변환하는 것이 Babel의 일입니다.

이것이 React의 선언적 접근 방식이 우리의 삶을 쉽게 만드는 방법입니다. 그러나 아직 끝나지 않았고, 우리는 React의 주요 아이디어, 즉 재사용성을 놓치고 있습니다. 재사용 가능한 React 구성 요소를 만들어 봅시다.

반응 구성요소 생성:

함수가 코드를 공유함으로써 우리의 삶을 더 쉽게 만든다는 것을 알고 있듯이 JSX 코드도 함수로 공유할 수 있지만 React에서는 컴포넌트라고 합니다.

예를 들어 보겠습니다.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

React.createElement()에 요소 대신 메시지 함수를 매개변수로 전달했습니다 . 함수를 React.createElement()에 매개변수로 전달하면 React Reconciler는 우리가 전달한 매개변수로 해당 함수를 호출합니다. 조정자가 호스트 요소를 만나면 렌더러가 이를 마운트하도록 합니다.

호스트 구성 요소는 호스트 환경 (예: 브라우저 또는 모바일 장치)에 속하는 플랫폼별 구성 요소입니다. DOM 호스트의 경우 div 또는 img 와 같은 HTML 요소일 수 있습니다 .

우리의 경우 메시지("Hello World!!") 와 메시지("GoodBye World!!")의 두 함수 호출이 발생 하고 두 함수 모두 다음을 반환합니다.

<div className=”msg”> Hello World!! </div>

원시 React API를 사용하는 것보다 JSX를 사용하여 코드를 더 읽기 쉽게 만드는 것처럼 사용자 정의 구성 요소(Javascript 함수)에 JSX를 사용하면 코드가 더 깨끗하고 읽기 쉬워집니다. JSX를 받아 React API로 변환하는 역할을 담당하는 것이 Babel이라는 점을 기억하십시오. 따라서 문자열이 아닌 이름으로 함수를 전달하는 방식으로 Babel을 구성해야 합니다.

커스텀 컴포넌트를 JSX 태그로 사용하려면 Babel이 커스텀 컴포넌트로 인식할 수 있도록 함수 이름의 첫 글자를 대문자로 표기해야 합니다. 다음과 같습니다.

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

만세!! 첫 번째 React 구성 요소를 만들었습니다.

결론:

이것이 React가 배후에서 작동하는 방식입니다. 이것은 내부적으로 어떻게 작동하는지 설명하는 기본 문서일 뿐이며 React를 강력하고 효율적으로 만드는 State, 가상 DOM, 조정 등과 같은 다른 많은 개념이 있음을 기억하십시오.