분류 Reactjs

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

컨텐츠 정보

  • 조회 244 (작성일 )

본문

이 안내서를 항상 최신으로 사용할 수 있습니다. React의 모든 주요 변경 후에 업데이트합니다. 16.8 릴리스 이후에 마지막으로 업데이트 되었습니다.


시작하기 전에 이 문서는 React 작업의 기본으로 분류한 개념을 다루는 초보자 용 안내서입니다. 

React에 대한 완전한 안내서가 아니라 완전한 소개입니다. 이 안내서의 끝에는 다음 몇 가지 수준의 리소스가 나와 있습니다. 이 안내서는 당신이 그들을 이해할 수 있는 길을 열어 줄 것입니다. 


React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리로 정의됩니다. 이 정의의 두 가지 다른 부분에 대해 이야기하겠습니다.


https://jscomplete.com/learn/complete-intro-react 


React는 JavaScript "라이브러리"입니다. 정확히 "프레임 워크"가 아닙니다. 완벽한 솔루션은 아니며 솔루션을 구성하기 위해 React와 함께 더 많은 라이브러리를 사용해야 하는 경우가 종종 있습니다. React는 솔루션의 다른 부분에 대해서는 아무 것도 가정하지 않습니다.


프레임워크는 특히 젊은 팀과 스타트업에게 큰 목적을 제공합니다. 프레임워크로 작업 할 때 많은 스마트한 디자인 결정이 이미 이루어 졌으므로 우수한 응용 프로그램 수준의 논리를 작성하는 데 집중할 수 있습니다. 그러나 프레임워크에는 몇 가지 단점이 있습니다. 대규모 코드베이스를 작업하는 숙련된 개발자에게는 이러한 단점이 종종 거래 차단기입니다.


일부는 주장하지만 프레임워크는 유연하지 않습니다. 프레임 워크는 일반적으로 모든 것을 특정 방식으로 코딩하기를 원합니다. 당신이 그런 식으로 벗어나려고 하면, 프레임 워크는 일반적으로 그것에 대해 싸우게 됩니다. 프레임 워크는 일반적으로 크고 기능이 가득합니다. 작은 조각 만 사용해야 하는 경우 어쨌든 전체를 포함해야 합니다. 분명히 이 점은 오늘날 바뀌고 있지만 여전히 이상적이지는 않습니다. 일부 프레임 워크는 모듈화되고 있습니다. 저는 훌륭하다고 생각하지만, 순수한 유닉스 철학의 큰 팬입니다.


한 가지 일을 잘 수행하는 프로그램을 작성하십시오. 함께 일할 프로그램을 작성하십시오. 

— 더그 맥 일로이 


React는 유닉스 철학을 따르고 있습니다. 하나의 일에만 집중하고 그 일을 매우 잘 수행하는 작은 라이브러리이기 때문입니다. 이 "한 가지"는 React 정의의 두 번째 부분 인 사용자 인터페이스 구축입니다.


사용자 인터페이스 (UI)는 사용자가 기계와 상호 작용하도록 하기 위해 사용자 앞에 놓는 것입니다. 전자 레인지의 간단한 버튼부터 우주 왕복선의 대시 보드에 이르기까지 UI가 어디에나 있습니다. 인터페이스 하려는 장치가 JavaScript를 이해할 수 있는 경우 React를 사용하여 UI를 설명 할 수 있습니다. 웹 브라우저는 JavaScript를 이해하므로 React를 사용하여 웹 UI를 설명 할 수 있습니다.


여기서 설명하는 단어는 기본적으로 React에서 수행하는 작업이므로 사용하고 싶습니다. 우리는 단지 우리가 원하는 것을 말해줍니다! React는 웹 브라우저를 통해 실제 UI를 구축 할 것입니다. React 또는 유사한 라이브러리가 없으면 기본 웹 API 및 JavaScript를 사용하여 UI를 수동으로 빌드해야 하므로 쉽지 않습니다.


"반응은 선언적"이라는 문장을 들을 때 이것이 정확히 의미하는 바입니다. 우리는 React로 UI를 설명하고 원하는 것을 알려줍니다 (어떻게 하는지). React는 "방법"을 처리하고 선언적 설명 (React 언어로 작성)을 브라우저의 실제 UI로 변환합니다. React는이 간단한 선언적 힘을 HTML 자체와 공유하지만 React를 사용하면 정적 데이터 뿐만 아니라 동적 데이터를 나타내는 HTML UI에 대해서도 선언적입니다.


React가 출시되었을 때 실제 DOM을 조정하는 데 사용할 수 있는 가상 DOM에 대한 현명한 아이디어를 도입했기 때문에 성능에 대한 많은 소문이 있었습니다 (다음 섹션에서 이에 대해 이야기하겠습니다).


DOM은 "문서 객체 모델"입니다. HTML (및 XML) 문서를 트리 구조로 취급하는 브라우저의 프로그래밍 인터페이스입니다. DOM API를 사용하여 문서 구조, 스타일 및 컨텐츠를 변경할 수 있습니다. 


React의 성능은 여전히 ​​오늘날 매우 인기 있는 가장 중요한 이유 중 하나이지만, 나는 그것이 "최고의"것으로 분류하지는 않습니다. React는 개발자와 브라우저 사이에 공통 언어를 생성하여 개발자가 DOM 요소에 대한 조치 대신 UI를 선언적으로 설명하고 상태에 대한 조치를 관리 할 수 있게 했기 때문에 게임 체인저라고 생각합니다. 그것은 단순히 사용자 인터페이스 "결과"의 언어입니다. 인터페이스에 대한 동작을 설명하는 단계가 아니라 개발자는 "최종"상태 (기능과 같은)로 인터페이스를 설명합니다. 액션이 해당 상태에 도달하면 React는 이를 기반으로 DOM의 UI 업데이트를 처리합니다 (다음에 볼 수 있듯이 효율적으로 수행).


누군가 React가 왜 배울 가치가 있는지 한 가지 이유를 말해 달라고 요청한 경우, 결과 기반 UI 언어가 바로 그 것입니다. 이 언어를 "React language"라고 합니다.


React 언어 


다음과 같은 TODO 목록이 있다고 가정하십시오.

const todos: [
  { body: 'Learn React Fundamentals', done: true },
  { body: 'Build a TODOs App', done: false },
  { body: 'Build a Game', done: false },
];


이 할 일 모음은 UI의 시작 상태입니다. UI를 표시하고 관리하려면 UI를 구축해야 합니다. UI에는 새 TODO를 추가하는 양식, TODO를 완료로 표시하는 방법 및 완료된 모든 TODO를 제거하는 방법이 있습니다.

todos ui 


이러한 각 작업에는 앱이 DOM 작업을 수행하여 DOM 노드를 생성, 삽입, 업데이트 또는 삭제해야 합니다. React를 사용하면 이러한 모든 DOM 작업에 대해 걱정할 필요가 없습니다. 언제 발생해야 하는지 또는 효율적으로 수행하는 방법에 대해 걱정하지 않아도 됩니다. todos 배열을 앱의 "상태"에 놓은 다음 React 언어를 사용하여 React를 "명령"하여 UI에 특정 방식으로 해당 상태를 표시하십시오.

<header>TODO List</header>

<ul>
  {todos.map(todo =>
    <li>{todo.body}</li>
  )}
</ul>

// Other form elements...


구문에 대해 걱정하지 않아도 진행 상황이 궁금하다면 JavaScript 객체 배열을 React 요소 배열에 매핑하기 만하면 됩니다. 


그런 다음 해당 todos 배열에서 데이터 조작을 수행하는 데 집중할 수 있습니다! 해당 배열의 항목을 추가, 제거 및 업데이트하면 React는 브라우저에서 렌더링 된 UI에이 객체에 대한 변경 사항을 반영합니다.


최종 상태를 기반으로 UI를 모델링 하는 이 정신 모델은 특히 뷰에 많은 데이터 전환이 있는 경우 이해하고 작업하기가 더 쉽습니다. 예를 들어, 얼마나 많은 친구가 온라인에 있는지 알려주는 견해를 고려하십시오. 이 뷰의 "state"는 현재 온라인 상태 인 친구 수의 단일 숫자일 뿐입니다. 얼마 전 세 명의 친구가 온라인에 접속 한 후 그 중 한 명은 연결을 끊은 다음 두 명은 더 합류했다고 신경 쓰지 않습니다. 현재 이 순간에 네 명의 친구가 온라인 상태임을 알고 있습니다.


React’s tree reconciliation 


React 이전에는 DOM API로 알려진 브라우저 API로 작업해야 할 때 DOM 트리를 최대한 많이 탐색하지 않았으며 그 이유가 있습니다. DOM에서의 모든 작업은 입력, 스크롤, 크기 조정 등과 같은 사용자 이벤트에 대한 반응을 포함하여 브라우저에서 발생하는 다른 모든 작업을 담당하는 동일한 단일 스레드에서 수행됩니다.


DOM에서의 값 비싼 작업은 사용자에게 느리고 고르지 않은 경험을 의미합니다. 애플리케이션이 절대 최소 작업을 수행하고 가능한 경우 배치하는 것이 매우 중요합니다. React는 우리가 정확히 그렇게 할 수 있도록 독창적 인 개념을 고안했습니다!


브라우저에서 요소 트리를 렌더링 하도록 React에 지시하면 먼저 해당 트리의 가상 표현을 생성하고 나중에 메모리에 유지합니다. 그런 다음 브라우저에 트리를 표시하는 DOM 작업을 계속 진행합니다.


이전에 렌더링 한 요소 트리를 업데이트하도록 React에 지시하면 업데이트 된 트리의 새로운 가상 표현이 생성됩니다. 이제 React에는 메모리에 2 가지 버전의 트리가 있습니다!


브라우저에서 업데이트 된 트리를 렌더링 하기 위해 React는 이미 렌더링 된 것을 버리지 않습니다. 대신 메모리에 있는 2 개의 가상 버전의 트리를 비교하고 차이점을 계산하고 기본 트리의 어떤 하위 트리를 업데이트 해야 하는지 확인한 다음 브라우저에서 이러한 하위 트리 만 업데이트합니다.


이 프로세스는 트리 조정 알고리즘으로 알려져 있으며 React를 브라우저의 DOM 트리로 작업하는 데 매우 효율적인 방법입니다. 우리는 곧 그 예를 보게 될 것입니다.


선언적 결과 기반 언어 및 효율적인 트리 조정 외에도 React가 큰 인기를 얻은 이유는 다음과 같습니다.

  • DOM API로 작업하는 것은 어렵습니다. React는 개발자에게 실제 브라우저보다 친숙한 "가상"브라우저로 작업 할 수 있는 기능을 제공합니다. React는 기본적으로 귀하를 대신하여 DOM과 통신하는 에이전트와 같은 역할을 합니다.
  • 반응에는 종종 "Just JavaScript"레이블이 붙습니다. 이것은 배우는 API가 매우 작다는 것을 의미하며 그 후에 JavaScript 기술이 더 나은 React 개발자가 됩니다. 이는 API가 더 큰 라이브러리보다 이점입니다. 또한 React API는 대부분 함수이며 필요한 경우 클래스입니다. UI 뷰가 데이터의 기능이라고 들리면 React에서 말 그대로 그럴 것입니다.
  • Learning React는 iOS 및 Android 모바일 애플리케이션에도 큰 도움이 됩니다. React Native를 사용하면 React 기술을 사용하여 기본 모바일 애플리케이션을 구축 할 수 있습니다. 웹, iOS 및 Android 애플리케이션간에 논리를 공유 할 수도 있습니다.
  • Facebook의 React 팀은 facebook.com에서 React에 도입 된 모든 개선 사항 및 새로운 기능을 테스트하여 커뮤니티 간의 라이브러리에 대한 신뢰를 높입니다. Facebook에서 철저한 생산 테스트를 거친 후에 만 ​​릴리스되기 때문에 React 릴리스에서 크고 심각한 버그는 거의 없습니다. React는 또한 Netflix, Twitter, Airbnb 등과 같이 많이 사용되는 다른 웹 애플리케이션을 지원합니다.