분류 Reactjs

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

컨텐츠 정보

  • 조회 293 (작성일 )

본문

React 요소 업데이트 


지금까지 가지고 있던 DOM 트리에서 업데이트 작업을 하겠습니다. 단순히 시간 문자열을 매 초마다 똑같이 만들어 보겠습니다.


setInterval Web timer API를 사용하여 브라우저에서 JavaScript 함수 호출을 쉽게 반복 할 수 있습니다. 두 버전에 대한 모든 DOM 조작을 함수에 넣고 렌더링 이름을 지정한 다음 setInterval 호출에 사용하여 매초 마다 반복하도록하겠습니다.


이 예제의 전체 코드는 다음과 같습니다.


https://jscomplete.com/playground/react-dom2 


두 버전에서 시간 문자열이 매 초마다 똑딱 거리는 방식에 유의하십시오. 이제 DOM에서 UI를 업데이트하고 있습니다.


이것은 React가 잠재적으로 당신의 마음을 날려 버릴 순간입니다. 기본 DOM 버전의 텍스트 상자에 무언가를 입력하려고 하면 사용할 수 없습니다. 우리는 기본적으로 모든 틱에서 전체 DOM 노드를 버리고 다시 생성하기 때문에 매우 기대됩니다. 그러나 React로 렌더링 된 텍스트 상자에 무언가를 입력하려고 하면 확실히 그렇게 할 수 있습니다!


전체 React 렌더링 코드가 티킹 타이머 내에 있지만 React는 전체 DOM 트리가 아닌 pre 요소의 내용만 변경합니다. 그렇기 때문에 텍스트 입력 상자가 재생성 되지 않아 입력 할 수 있었습니다.


Chrome DevTools 요소 패널에서 두 개의 DOM 노드를 검사하면 DOM을 시각적으로 업데이트하는 다양한 방법을 볼 수 있습니다. Chrome DevTools 요소 패널은 업데이트되는 모든 DOM 요소를 강조 표시합니다. 네이티브 HTML 버전이 모든 눈금으로 전체 div # mountNode 컨테이너를 재생성 하는 방법을 볼 수 있지만 React는 div # mountNode2 컨테이너에서 사전 태그 만 현명하게 재생성 합니다.

highlights 


이것이 React의 현명한 확산 알고리즘입니다. 기본 DOM 트리에서 실제로 업데이트 해야 하는 내용 만 업데이트하고 다른 모든 항목은 동일하게 유지합니다. 이 diffing 프로세스는 React의 가상 DOM 표현으로 인해 메모리에 유지되므로 가능합니다. UI보기를 몇 번이나 재생성 해야 하더라도 React는 필요한 "부분"업데이트 만 브라우저로 가져갑니다.


이 방법은 훨씬 더 효율적일 뿐만 아니라 UI 업데이트에 대한 생각에서 복잡성을 제거합니다. React를 사용하면 DOM을 업데이트 해야 하는지 여부에 대한 모든 계산을 수행 할 수 있으므로 데이터 (상태)와 UI를 설명하는 방법에 대해 집중할 수 있습니다. 그런 다음 브라우저의 실제 UI에 이러한 업데이트를 반영하는 데 필요한 단계에 대해 걱정하지 않고 필요에 따라 데이터 상태에 대한 업데이트를 관리합니다 (React가 정확히 그렇게 하고 효율적인 방식으로 수행한다는 것을 알고 있기 때문에)!


React은 구성 요소에 관한 것입니다. 


React에서 재사용 가능하고 구성 가능하며 상태 저장이 가능한 컴포넌트를 사용하여 UI를 설명합니다.


작은 구성 요소를 정의한 다음 함께 구성하여 더 큰 구성 요소를 만듭니다. 작거나 큰 모든 구성 요소는 다른 프로젝트에서도 재사용 할 수 있습니다.


컴포넌트를 간단한 함수 (모든 프로그래밍 언어)로 생각할 수 있습니다. 입력이 있는 함수를 호출하고 출력을 제공합니다. 필요에 따라 기능을 재사용하고 더 작은 기능으로 더 큰 기능을 구성 할 수 있습니다.


반응 구성 요소는 정확히 동일합니다. 입력은 "props"세트이고 출력은 UI에 대한 설명입니다. 여러 UI에서 단일 구성 요소를 재사용 할 수 있으며 구성 요소에는 다른 구성 요소가 포함될 수 있습니다. React 컴포넌트의 기본 형식은 실제로 평범한 JavaScript 함수입니다.


일부 React 구성 요소는 순수하지만 구성 요소에 부작용을 일으킬 수도 있습니다. 예를 들어, 컴포넌트가 브라우저에 마운트 될 때 웹 페이지의 HTML "제목"을 변경하거나 브라우저 보기를 특정 위치로 스크롤 할 수 있습니다.


가장 중요한 것은 React 컴포넌트가 컴포넌트의 수명 주기 동안 변경 될 수있는 데이터를 보유하기 위한 개인 상태를 가질 수 있다는 것입니다. 이 비공개 상태는 컴포넌트의 출력을 유도하는 입력의 암시 적 부분이며 실제로 React에 이름을 부여합니다.


왜 React의 이름이 "React"입니까? 

입력의 일부인 React 컴포넌트의 상태가 변경되면 이를 나타내는 UI (출력)도 변경됩니다. UI 설명의 이러한 변경 사항은 작업 중인 장치에 반영되어야 합니다. 브라우저에서 DOM 트리를 업데이트 해야 합니다. React 애플리케이션에서는 수동으로 수행하지 않습니다. React는 단순히 상태 변경에 반응하고 필요할 때 DOM을 자동으로 (그리고 효율적으로) 업데이트합니다. 



함수를 사용하여 컴포넌트 생성 


가장 간단한 형태의 React 컴포넌트는 일반 JavaScript 함수입니다.

// jsdrops.com/bx1

function Button (props) {
  // Returns a DOM/React element here. For example:
  return <button type="submit">{props.label}</button>;
}

// To render a Button element in the browser
ReactDOM.render(<Button label="Save" />, mountNode);

위의 Button 함수의 반환 된 출력에서 ​​HTML처럼 보이는 것을 어떻게 작성했는지 주목하십시오. 이것은 HTML도 아니고 JavaScript도 아니며 React도 아닙니다. 이것은 JSX입니다. HTML과 유사한 구문으로 함수 호출을 작성할 수 있는 JavaScript의 확장입니다.


계속해서 Button 함수 안에 다른 HTML 요소를 반환하고 모두 지원되는 방식을 확인하십시오 (예 : 입력 요소 또는 텍스트 영역 요소 반환). 


JSX는 HTML이 아닙니다 


브라우저는 JSX를 이해하지 못합니다. 일반 브라우저 콘솔에서 버튼 기능을 실행하려고 하면 JSX 파트의 첫 번째 문자에 대해 불평합니다.

jsx not js 

브라우저가 이해하는 것은 (React 라이브러리가 포함되어 있음) React.createElement API 호출입니다. 다음과 같이 JSX없이 동일한 버튼 예제를 작성할 수 있습니다.

// jsdrops.com/bx2

function Button (props) {
  return React.createElement(
    "button",
    { type: "submit" },
    props.label
  );
}

ReactDOM.render(
  React.createElement(Button, { label: "Save"}),
  mountNode
);

JSX없이 React를 이와 같이 사용할 수 있습니다. React 라이브러리를 로드 한 후 브라우저에서 직접 Button 기능을 실행할 수 있으며 정상적으로 작동합니다. 그러나 함수 호출을 처리하는 대신 HTML을 보고 작업하고 싶습니다. JavaScript 만 사용하고 HTML을 사용하지 않는 웹 사이트를 마지막으로 구축 한시기는 언제입니까? 원한다면 할 수 있지만 아무도 그렇게 하지 않습니다. 이것이 JSX가 존재하는 이유입니다.


JSX는 기본적으로 타협입니다. React.createElement 구문을 사용하여 React 컴포넌트를 작성하는 대신 HTML과 매우 유사한 구문을 사용한 다음 컴파일러를 사용하여 React.createElement 호출로 변환합니다.


한 형태의 구문을 다른 형태의 구문으로 변환하는 컴파일러를 "트랜스 플러"라고합니다. JSX를 번역하기 위해 Babel 또는 TypeScript와 같은 변환기를 사용할 수 있습니다. 예를 들어 jsComplete 놀이터는 TypeScript를 사용하여 JSX를 넣습니다. create-react-app를 사용하면 생성 된 앱은 내부적으로 Babel을 사용하여 JSX를 변환합니다.


babeljs.io/repl/을 사용하여 JSX 구문이 React를 위해 변환되는 것을 볼 수 있지만 JSX도 자체적으로 사용할 수 있습니다. React 전용이 아닙니다. 


따라서 React 구성 요소는 React 요소 (일반적으로 JSX)를 반환하는 JavaScript 함수입니다. JSX가 사용되면 <tag> </ tag 구문은 React.createElement ( "tag")에 대한 호출이 됩니다. React 컴포넌트를 구축 할 때 이 점을 명심해야 합니다. HTML을 작성하고 있지 않습니다. JavaScript 확장을 사용하여 React 요소 (기본적으로 JavaScript 오브젝트)를 작성하는 함수 호출을 리턴합니다.


이름은 대문자로 시작해야 합니다 


구성 요소의 이름을 "Button"으로 지정했습니다. HTML 문자와 React 요소의 혼합을 다루기 때문에 첫 번째 문자는 대문자입니다. Babel과 같은 JSX 컴파일러는 소문자로 시작하는 모든 이름을 HTML 요소의 이름으로 간주합니다. React 요소는 변수로 전달되어야 하지만 HTML 요소는 React.createElement 호출에 문자열로 전달되므로 중요합니다.

name capital letter 

계속해서 "Button"대신 React 컴포넌트의 이름을 "button"으로 지정하고 ReactDOM이 어떻게 함수를 완전히 무시하고 빈 HTML 버튼 요소를 렌더링 하는지 확인하십시오.

// jsdrops.com/bx3

// Wrong:
function button () {
  return <div>My Fancy Button</div>;
};

// The following will render an HTML button
// (and ignore the fancy button function)
ReactDOM.render(<button />, mountNode);