분류 Reactjs

React에 대한 완전한 소개(2)

컨텐츠 정보

  • 조회 261 (작성일 )

본문

첫 React 예 


트리 조정 프로세스의 실질적인 이점과 그 큰 차이를 확인하려면 해당 개념에만 초점을 둔 간단한 예를 살펴 보겠습니다. 기본 웹 API를 사용한 후 React API (및 해당 조정 작업)를 사용하여 HTML 요소 트리를 두 번 생성하고 업데이트 하겠습니다. 이 예제를 단순하게 유지하기 위해 컴포넌트 또는 JSX (React에서 널리 사용되는 JavaScript 확장)를 사용하지 않습니다. 또한 JavaScript 간격 타이머 내에서 업데이트 작업을 수행합니다. 이것이 우리가 React 애플리케이션을 작성하는 방법이 아니라 한 번에 하나의 개념에 초점을 맞추겠습니다.


이 jsComplete 놀이터 세션 (jsdrops.com/react-dom1)으로 시작하십시오.


이 세션에서 간단한 HTML 요소는 두 가지 방법을 사용하여 디스플레이에 렌더링됩니다.


방법 # 1 : 웹 DOM API를 직접 사용 

document.getElementById('mountNode').innerHTML = `
  <div>
    Hello HTML
  </div>
`;

방법 # 2 : React의 API 사용 

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello React',
  ),
  document.getElementById('mountNode2'),
);

ReactDOM.render 메소드 및 React.createElement 메소드는 React 애플리케이션의 핵심 API 메소드입니다. 사실,이 두 가지 방법을 모두 사용하지 않으면 React 웹 애플리케이션이 존재할 수 없습니다. 간단히 설명하겠습니다 :


ReactDOM.render 


이것은 기본적으로 브라우저의 DOM에 React 애플리케이션의 진입 점입니다. 두 가지 인수가 있습니다.

  1. 첫 번째 인수는 브라우저에 렌더링 하는 것입니다. 이것은 항상 "React 요소"입니다.
  2. 두 번째 인수는 브라우저에서 해당 React 요소를 렌더링 하는 위치입니다. 정적으로 렌더링 된 HTML에 존재하는 유효한 DOM 노드 여야 합니다. 위의 예제는 놀이터의 표시 영역에 존재하는 특수한 mountNode2 요소를 사용합니다 (첫 번째 mountNode는 기본 버전에 사용됨).

정확히 React 요소는 무엇입니까? DOM 요소를 설명하는 가상 요소입니다. React.createElement API 메소드가 리턴하는 것입니다.


React.createElement 


React에서 문자열을 사용하여 DOM 요소 (위의 기본 DOM 예제에서와 같이)를 나타내는 대신 React.createElement 메소드에 대한 호출을 사용하여 객체로 DOM 요소를 나타냅니다. 이러한 객체를 반응 요소라고 합니다.


React.createElement 함수에는 많은 인수가 있습니다.

  1. 첫 번째 인수는 DOM 요소가 나타내는 HTML "태그"이며 이 예에서는 div입니다.
  2. 두 번째 인수는 DOM 요소에 원하는 모든 속성 (예 : id, href, title 등)에 대한 것입니다. 우리가 사용하는 간단한 div에는 속성이 없으므로 null을 사용했습니다.
  3. 세 번째 인수는 DOM 요소의 내용입니다. 거기에 "Hello React"문자열을 넣었습니다. 선택적 세 번째 인수와 렌더링 된 요소의 하위 목록을 구성한 후의 모든 선택적 인수입니다. 요소는 0 개 이상의 자식을 가질 수 있습니다.

React.createElement를 사용하여 React 컴포넌트에서 요소를 작성할 수도 있습니다. 


React 요소는 메모리에 생성됩니다. 실제로 React 요소를 DOM에 표시하기 위해 ReactDOM.render 메소드를 사용하여 React 요소의 상태를 브라우저의 실제 DOM 트리에 반영하는 가장 최적의 방법을 알아냅니다.


이 코드 세션에서 두 가지 방법을 실행하면 "Hello HTML"상자와 "Hello React"상자가 나타납니다.


picture2 

중첩 React 요소 


우리는 두 개의 노드가 있습니다. 하나는 DOM API로 직접 제어되고 다른 하나는 React API로 제어됩니다 (다시 DOM API를 사용함). 브라우저에서 이 두 노드를 구축하는 방법 간의 유일한 주요 차이점은 HTML 버전에서는 문자열을 사용하여 DOM 트리를 나타내는 반면 React 버전에서는 순수한 JavaScript 호출을 사용하고 DOM 트리를 문자열 대신 객체로 표현했다는 것입니다.


HTML UI가 아무리 복잡 해지더라도 React를 사용할 때 모든 HTML 요소는 React 요소로 표시됩니다.


이 간단한 UI에 HTML 요소를 더 추가하겠습니다. 사용자의 입력을 읽을 수 있는 텍스트 상자를 추가하겠습니다. HTML 버전의 경우 템플릿 내에 직접 새 요소의 태그를 삽입하면 됩니다.


document.getElementById('mountNode').innerHTML = `
  <div>
    Hello HTML
    <input />
  </div>
`;

React와 동일한 작업을 수행하려면 위의 React.createElement에 대한 세 번째 인수 뒤에 추가 인수를 추가 할 수 있습니다. 네이티브 DOM 예제의 내용과 일치 시키기 위해 입력 요소를 렌더링 하는 또 다른 React.createElement 호출 인 네 번째 인수를 추가 할 수 있습니다.

ReactDOM.render(
  React.createElement(
    "div",
    null,
    "Hello React ",
    React.createElement("input")
  ),
  document.getElementById('mountNode2'),
);

두 버전 모두에서 현재 시간을 렌더링 해 보겠습니다. 사전 요소 (놀이터에 고정 폭 글꼴)를 넣습니다. new Date(). toLocaleTimeString()을 사용하여 간단한 시간 문자열을 표시 할 수 있습니다. 기본 DOM 버전에 필요한 작업은 다음과 같습니다.

document.getElementById('mountNode1').innerHTML = `
  <div>
    Hello HTML
    <input />
    <pre>${new Date().toLocaleTimeString()}</p>
  </div>
`;


React에서 동일한 작업을 수행하기 위해 최상위 div 요소에 다섯 번째 인수를 추가합니다. 이 새로운 다섯 번째 인수는 또 다른 React.createElement 호출이며, 이번에는 컨텐츠에 대해 새로운 Date(). toLocaleTimeString() 문자열과 함께 프리 태그를 사용합니다.

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello React ',
    React.createElement('input'),
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString()
    )
  ),
  document.getElementById('mountNode2')
);


두 버전 모두 여전히 브라우저에서 똑같은 HTML을 렌더링 합니다.

picture3 

아마 지금 생각하고 있듯이 React를 사용하는 것은 간단하고 친숙한 기본 방법보다 훨씬 어렵습니다. React가 잘하는 것은 친숙한 HTML을 포기하고 HTML로 간단히 쓸 수 있는 것을 작성하기 위해 새로운 API를 배워야 할 가치가 있는 것은 무엇입니까?


대답은 첫 번째 HTML 뷰를 렌더링 하는 것이 아닙니다. DOM에서 기존 뷰를 업데이트하기 위해 해야 ​​할 일입니다.