React 튜토리얼: 시작하는 방법과 비교 방법

게시 됨: 2022-03-11

특히 프론트엔드와 자바스크립트는 이상한 세계입니다. 매일 출시되는 새로운 기능의 양은 작업하지 않는 사람들과 작업하는 많은 사람들에게 종종 조롱을 받습니다. 그러나 때때로 우리는 새로운 정보, 라이브러리 및 토론으로 인해 다소 압도당하고 조금 더 오래 머물 수 있는 선박의 안전한 피난처와 같은 안정적인 것을 원합니다. 최근에 React는 역동적인 JavaScript 진화의 바다에서 이 유순한 항구인 것 같습니다.

이를 염두에 두고 우리는 기능을 보여주고 Angular 및 VueJS와 비교하는 방법을 보기 위해 이 여러 부분으로 구성된 React 튜토리얼을 제작하기로 결정했습니다.

JavaScript 코드의 바다 위에 명확하게 표시된 등대로서의 React의 그림

물론 React는 우리가 사용할 수 있는 유일한 항구는 아니지만 현재 가장 인기 있고 안정적이며 혁신적인 솔루션 중 하나이며 여전히 많은 업그레이드가 제공되지만 개선을 위한 옵션입니다. 기능의 필요성보다.

2019년의 반응 현황

React는 우리가 2011년까지 추적할 수 있는 보기 라이브러리입니다. FaxJs라는 첫 번째 프로토타입이 Facebook 페이지에 등장했을 때 React 자체는 JSConfUS에서 Jordan Walke(언급된 프로토타입의 저자이기도 함)가 소개했습니다. 2013년 5월 29일, 2013년 7월 2일 GitHub에 공개되었습니다.

React는 커뮤니티를 확장하고 React를 대중화하기 위한 회의가 나타나기 시작한 2014년에도 계속해서 인기를 얻었습니다. 하지만 제 관점에서 2015년은 React에게 획기적인 해였습니다. 대기업(예: Airbnb 및 Netflix)이 React 솔루션을 좋아하고 채택하기 시작했습니다. 또한 그 해에 React Native가 등장했습니다. React Native의 아이디어는 완전히 새로운 것은 아니었지만 특히 Facebook의 지원을 받았기 때문에 보는 것은 흥미로웠습니다.

또 다른 큰 변화는 Flux 구현인 Redux였습니다. 이는 상태 관리 방식을 보다 접근하기 쉽고 쉽게 만들어 현재까지 가장 성공적인 구현이 되었습니다.

그때와 지금 사이에 React 도구, 핵심 알고리즘 재작성, Fiber, 의미론적 버전 관리 변경 등을 포함하여 많은 다른 것들을 사용할 수 있게 되었습니다. Hooks가 포함된 새 버전이 출시되기 몇 주 전인 오늘 16.6.3에 있습니다. React는 잘 알려져 있고 안정적이며 좋은 평가를 받고 있습니다.

그러나 반응이란 무엇 입니까 ?

글쎄요, 당신이 프론트엔드 개발자이고 아직 그것에 대해 들어본 적이 없다면 축하의 말을 해야 합니다. 그것은 굉장한 위업이기 때문입니다.

농담은 제쳐두고, React는 UI를 빌드하는 데 도움이 되는 선언적 구성 요소 기반 보기 라이브러리입니다. 처음에는 많은 사람들이 후자로 설명했지만 프레임워크가 아니라 라이브러리입니다.

분명히 Redux, React Router 등을 추가하려고 하면 일반 단일 페이지 애플리케이션을 만드는 데 필요한 모든 것을 갖기 시작합니다. 이것이 때때로 라이브러리가 아닌 프레임워크로 잘못 특성화되는 이유일 수 있습니다. . 어떤 것이든 해당 환경의 모든 구성 요소를 함께 사용하면 "프레임워크"라는 용어가 다소 적합하지만 그 자체로 React는 라이브러리일 뿐이라고 주장할 수 있습니다.

명명법은 그만하고 React의 다른 점, 시작 이전에는 없었던 점에 집중합시다. 먼저 React 하면 가장 먼저 코드를 볼 때 가장 먼저 눈에 들어오는 것이 JSX라고 생각합니다. JSX는 HTML/XML과 다소 유사한 JavaScript 구문 확장입니다. React 및 JSX와 관련하여 HTML과 몇 가지 차이점이 있습니다. 예를 들어 React의 클래스는 className 이고 tabindex는 있지만 tabIndex 는 없으며 스타일은 camelCased 속성이 있는 JavaScript 객체를 허용하는 식입니다.

약간의 차이가 있지만 누구든지 금방 알아차릴 수 있습니다. 이벤트 처리는 이벤트를 처리하기 위해 일부 기능을 첨부하는 데 사용할 수 있는 onChange 및 onClick 속성을 통해 이루어집니다. 또한 props를 사용하여 나중에 컴포넌트를 자유롭게 재사용하고 사용자 지정할 수 있으므로 매우 동일한 코드를 몇 번 작성할 이유가 없습니다.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

그러나 JSX는 실제로 React에서 절대적으로 필요한 것은 아닙니다. JSX를 사용하지 않고 일반 함수를 작성하여 요소를 작성할 수 있습니다. 위와 동일한 코드를 아래와 같이 사용할 수 있습니다.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

분명히, 편리한 경우가 있지만(예: 정말 작은 것을 도입하고 빌드 환경을 변경하고 싶지 않은 경우) 이러한 구문을 사용하도록 제안하는 것은 아닙니다.

사실 위의 스니펫을 보여드린 또 다른 이유가 있습니다. 종종 개발자는 다음을 수행해야 하는 이유를 이해하지 못합니다.

 import React from 'react';

스니펫은 설명이 필요 없습니다. Component 를 추출하더라도 Babel은 JSX 위의 React.createElement 아래로 변환되기 때문에 여전히 React가 필요합니다. 따라서 React를 가져오지 않으면 단순히 실패합니다. 나는 아직 JavaScript에 없는 것(또는 오히려 브라우저에 있는 것) 또는 어떻게든 확장된 것(또는 Babel이 Babel 7에서 지원하는 TypeScript와 같은 다른 언어)인 것을 소개하는 데 도움이 되는 도구인 Babel에 대해 언급했습니다. Babel 덕분에:

  • JSX는 브라우저가 이해할 수 있는 기능으로 만들어집니다.
  • 아직 브라우저에 없는 새로운 기능(예: 클래스 속성)을 사용할 수 있습니다.
  • 최신 브라우저에는 있지만 이전 브라우저 지원을 유지하면서 이전 브라우저에는 없는 기능을 추가할 수 있습니다.

요컨대, 내일은 JavaScript에서 오늘입니다. 이것은 아마도 자체 기사가 필요할 것입니다. React 가져오기는 Webpack을 통한 ProvidePlugin 도입 등의 다른 기술로도 우회할 수 있다는 점을 언급할 가치가 있지만 여기서는 공간이 제한되어 있으므로 이를 피하고 사용자가 Create React App( CRA)(이 도구에 대한 자세한 내용은 나중에 언급됨).

두 번째로 중요하고 JSX 자체보다 훨씬 더 중요한 것은 React가 가상 DOM을 기반으로 한다는 것입니다. 간단히 말해서 가상 DOM은 개발자가 작성하는 JavaScript로 표현되는 이상적인 트리의 메모리이며 나중에 실제 DOM과 비교되고 조정이라는 프로세스에서 동기화됩니다.

React는 Angular 및 Vue와 어떻게 비교됩니까?

나는 라이브러리를 비교하는 것을 매우 싫어합니다. 특히 배와 사과를 비교해야 하는 경우(라이브러리와 프레임워크 등) 특히 그렇습니다.

따라서 “X는 템플릿이 아닌 JSX를 사용하기 때문에 Y보다 낫습니다. " 이러한 점은 일반적으로 개인의 취향이며 주관적인 선택입니다. 또한 속도, 메모리 할당 등은 React 및 모든 주요 경쟁자(Angular 및 Vue가 떠오름)에서 매우 유사합니다. 이 문제에 대한 훌륭한 보고서가 있지만 명심하십시오. 대다수의 응용 프로그램은 10k 테이블의 행을 교환하는 정말 큰 테이블처럼 보이지 않습니다. 따라서 이러한 결과는 순수한 속도 실험이기도 합니다. 현실 세계에서, 당신은 처음부터 그런 일을 하지 않을 것입니다.

React vs. Angular vs. Vue.js의 그림

이제 React와 관련된 몇 가지 질문을 살펴보고 경쟁 제품과 어떻게 비교하는지 살펴보겠습니다.

많은 취업 기회를 갖고 싶습니다. React는 얼마나 인기가 있습니까?

글쎄요, 대답하기 쉬운 질문입니다. React를 선택하세요. 사실, React는 Vue 보다 대략 6-10 배 더 많은 일자리를 가지고 있다고 말하고 싶습니다. 앵귤러보다. React 전문가에 대한 수요가 높은데 왜 Vue는 GitHub에서 인기가 높으면서도(실제로는 React보다 더 많은 별을 가지고 있음) 채용 공고가 더 적습니까? 나는 아무 생각이 없다.

저는 큰 커뮤니티, 많은 라이브러리, 발생할 수 있는 문제에 대한 빠른 솔루션을 원합니다.

반응합니다. 더 이상 보지 마세요.

사용하기 쉽고 개발이 즐겁습니까?

다시 한 번, 2018년과 2017년 JS 보고서에 따르면 React와 Vue는 모두 좋은 평판을 얻고 있으며 대부분의 개발자는 이를 다시 사용할 것이라고 말합니다. 반면에 Angular는 해가 갈수록 더 많은 사람들이 다시는 사용 하지 않을 것이라고 말하는 경향이 있습니다.

새 단일 페이지 응용 프로그램을 만들고 싶지만 라이브러리를 검색하고 싶지 않습니다.

아마도 Angular가 더 나은 선택이라고 말할 수 있는 유일한 곳일 것입니다.

대기업은 없습니다. 최대한 독립하고 싶은데 뭘 선택해야 할까요?

Vue는 우리의 빅 트리오에서 유일한 독립된 것입니다. (Facebook은 React를 지원하고 Google은 Angular를 지원합니다.)

가장 쉬운 시작과 가장 빠른 학습 곡선은?

뷰/리액트. 여기에서는 Vue 쪽으로 기울고 있지만 그건 제 개인적인 생각일 뿐입니다.

왜요? JSX(선택 사항)도 알 필요가 없고 기본적으로 HTML + CSS + JavaScript이기 때문입니다.

React 튜토리얼: 첫 번째 앱 시작하기

React 튜토리얼: React 앱 생성 성공 메시지 스크린샷

요즘 React를 시작하는 가장 쉬운 방법은 프로젝트를 생성하고 Webpack/Babel 등에 필요한 모든 설정을 피할 수 있도록 도와주는 CLI 도구인 CRA를 사용하는 것입니다. 대신 기본적으로 구성되는 방식과 시간이 지남에 따라 포함된 내용에 의존합니다. 덕분에 일부 중요한 라이브러리의 주요 업데이트에 신경 쓸 필요가 없습니다.

물론 나중에 npm run eject 를 실행하여 스스로 "제거"하고 모든 단일 측면을 스스로 처리할 수 있습니다. 이 접근 방식은 다른 방법으로는 사용할 수 없는 항목(예: 데코레이터)으로 앱을 향상시킬 수 있기 때문에 고유한 장점이 있지만 많은 추가 파일과 더 많은 시간이 필요하기 때문에 골칫거리가 될 수도 있습니다.

따라서 가장 먼저 할 일은 다음과 같습니다.

 npx create-react-app {app-name}

그런 다음 npm run start 를 실행하면 준비가 완료됩니다.

클래스 대 함수 구성요소

이러한 구성 요소가 어떻게 다른지 설명하는 것으로 시작해야 합니다. 기본적으로 각 구성 요소는 함수 또는 클래스 가 될 수 있습니다. 그들 사이의 주요 차이점은 클래스 1에는 함수 구성 요소에서 사용할 수 없는 몇 가지 기능이 있다는 것입니다. 상태를 가질 수 있고 refs, 수명 주기 등을 사용할 수 있습니다. 이것이 현재 플레이 상태이며 버전 16.7(또는 이미 언급된 변경 사항으로 인해 호출됨) 후크도 있으므로 후크를 사용하여 상태 및 참조가 가능합니다.

클래스 구성 요소에는 Component 및 PureComponent 의 두 가지 유형이 있습니다. 둘 사이의 유일한 차이점은 PureComponent 가 props와 state의 얕은 비교를 수행한다는 것입니다. 컴포넌트와 그 자식이 정확히 같은 상태에 있는 "낭비된" 렌더를 만들고 싶지 않은 상황에서 자체 이점이 있습니다. 렌더링 후. 그러나 그것은 단지 얕은 비교일 뿐입니다. 자신의 비교를 구현하려면(예: 복잡한 props를 전달하기 때문에) Component 를 사용하고 shouldComponentUpdate (기본적으로 true를 반환함)를 재정의하십시오. 16.6 이상 이후로 비슷한 기능을 함수 구성 요소에서도 사용할 수 있습니다. 고차 구성 요소이고 기본적으로 PureComponent (얕은 비교)처럼 동작하는 React.memo 덕분에 사용자 정의 props 비교를 전달할 수 있는 두 번째 인수가 필요합니다. .

일반적으로 함수 구성 요소를 사용할 수 있으면(클래스 기능이 필요하지 않음) 사용하십시오. 곧 16.7.0부터 수명 주기 메서드로 인해 클래스 구성 요소를 사용해야 합니다. 나는 함수 구성 요소가 더 투명하고 추론하기 쉽고 이해하기 쉽다고 믿는 경향이 있습니다.

React 수명 주기 방법

구성 요소 장착, 업데이트 및 장착 해제의 그림

생성자(소품)

  • 선택 사항, 특히 JavaScript에 대한 클래스 필드 선언이 기본적으로 포함되는 CRA가 널리 사용되는 경우. 클래스 본문 내에서 화살표 함수로 메서드를 바인딩하는 경우 선언하는 것은 무의미합니다. 유사한 상태를 클래스 속성으로 초기화할 수도 있습니다.
  • ES6 클래스에서 객체 및 바인딩 메서드에 대한 로컬 상태 초기화에만 사용해야 합니다.

componentDidMount()

  • 여기에서 Ajax 호출을 하세요.
  • 이벤트 리스너, 구독 등이 필요한 경우 여기에 추가하세요.
  • 여기에서 setState 를 사용할 수 있습니다(그러나 구성 요소를 다시 렌더링함).

componentWillUnmount()

  • 여전히 진행 중인 모든 항목을 정리합니다(예: Ajax 중단, 구독 취소, 타이머 삭제 등).
  • 구성 요소가 마운트 해제되고 경고가 표시되므로 의미가 없으므로 setState 를 호출하지 마십시오.

componentDidUpdate(prevProps, prevState, 스냅샷)

  • 구성 요소가 방금 업데이트를 완료했을 때 발생합니다(초기 렌더링에서는 발생하지 않음).
  • 선택적으로 사용할 수 있는 세 가지 매개변수(이전 props, 이전 상태 및 구성 요소가 getSnapshotBeforeUpdate 를 구현하는 경우에만 표시되는 스냅샷)가 있습니다.
  • shouldComponentUpdate 가 true를 반환하는 경우에만 발생합니다.
  • 여기서 setState 를 사용하는 경우 이를 보호해야 합니다. 그렇지 않으면 무한 루프에 빠지게 됩니다.

shouldComponentUpdate(nextProps, nextState)

  • 성능 최적화 전용입니다.
  • false를 반환하면 렌더가 호출되지 않습니다.
  • 재정의된 SCO가 단순한 props/state 비교인 경우 PureComponent 를 대신 사용할 수 있습니다.

getSnapshotBeforeUpdate()

  • 현재 DOM에 대한 일부 정보를 유지하는 데 사용할 수 있습니다(예: 현재 스크롤 위치). 나중에 componentDidUpdate 내에서 재사용하여 스크롤 위치를 복원할 수 있습니다.

componentDidCatch(오류, 정보)

  • 로깅 오류가 발생해야 하는 곳입니다.
  • setState 를 호출할 수 있지만 향후 릴리스에서는 정적 메서드 getDerivedStateFromError(error) 를 위해 삭제됩니다. 이 메서드는 값을 반환하여 상태를 업데이트하여 상태를 업데이트합니다.

둘 다 정적이고 다른 설명에서 언급된 두 가지 추가 방법이 있습니다.

정적 getDerivedStateFromError(오류)

  • 오류 정보는 여기에서 확인할 수 있습니다.
  • 오류 처리에 사용할 수 있는 상태를 업데이트할 개체 값을 반환해야 합니다(무언가 표시).
  • 정적이므로 구성 요소 인스턴스 자체에 액세스할 수 없습니다.

정적 getSnapshotBeforeUpdate(소품, 상태)

  • 시간이 지남에 따라 소품이 변경되는 경우에 사용해야 합니다. 예를 들어 React 문서에 따르면 전환 구성 요소에 유용할 수 있습니다.
  • 정적이므로 구성 요소 인스턴스 자체에 액세스할 수 없습니다.

참고로 현재 사용할 수 있는 메서드가 몇 개 더 있지만 React 17.0에서 제거될 예정이므로 여기에서 언급하지 않았습니다.

상태 대 소품

Props 가 더 쉽고 빠르게 설명할 수 있으므로 시작하겠습니다. Props는 나중에 정보/비즈니스 로직 등을 표시하기 위해 컴포넌트 내에서 재사용될 수 있는 컴포넌트에 전달되는 속성입니다.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

위의 예에서 name 은 prop입니다. Props는 읽기 전용 요소이며 자식 구성 요소에서 직접 변경할 수 없습니다. 또한 사람들이 자주 하는 한 가지 나쁜 습관이 있습니다. 그것은 props를 state에 복사하고 나중에 state에서 작업하는 것입니다. 물론 "제출 후 상위 구성 요소를 업데이트하는 초기 상태"와 같은 작업을 수행하려는 경우가 있지만 더 드문 경우입니다. 이러한 시나리오에서는 초기 상태 공급이 의미가 있을 수 있습니다. 또한 문자열과 같은 속성은 자식 구성 요소에 전달할 수 있을 뿐만 아니라 숫자, 개체, 함수 등도 전달할 수 있습니다.

Props에는 defaultProps 라는 유용한 기능이 하나 더 있습니다. 이 필드는 구성 요소에 대한 기본 props가 무엇인지 알려줄 수 있는 정적 필드입니다(예: 구성 요소에 전달되지 않은 경우).

한 구성 요소(부모)가 나중에 해당 자식에 의해 재사용되는 상태를 갖는 "상태 올리기"의 경우(예: 한 자식은 그것을 표시하고 다른 자식은 편집을 허용), 우리는 다음에서 자식에게 함수를 전달해야 합니다 부모의 로컬 상태를 업데이트할 수 있습니다.

반면에 State 는 수정할 수 있는 로컬 상태이지만 this.setState 를 사용하여 간접적입니다. 누군가가 상태를 직접 변경하는 경우 구성 요소는 변경 사항을 인식하지 못하고 상태에 대한 언급된 변경 사항을 반영하도록 다시 렌더링되지 않습니다.

SetState 는 얕은 병합을 수행하여 로컬 상태 개체를 변경하는 메서드이며, 그 후 구성 요소는 자체적으로 다시 렌더링하여 이에 응답합니다. setState 가 사용된 후 this.state 속성은 최적화로 인해 setState 의 몇 가지 인스턴스가 함께 일괄 처리될 수 있으므로 함수에 언급된 변경 사항을 즉시 반영하지 않습니다(비동기 특성을 가짐). 상태를 업데이트한 직후 구성 요소로 작업을 수행할 수 있는 몇 가지 방법이 있습니다.

  • setState({value: '5'})
  • setState((state, props) => ({value: state.name + “'s”}))
  • setState([object / function like above], () => {}) – 이 형식을 사용하면 상태가 우리가 갖고자 하는 데이터를 반영할 때 호출되는 callback 을 첨부할 수 있습니다(첫 번째 인수에서).
 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

반응 컨텍스트

React는 최근 Context API를 안정화했습니다(React에 꽤 오랫동안 있었지만 Redux와 같은 가장 인기 있는 라이브러리에서 널리 사용되었음에도 불구하고 실험적인 기능이었습니다). 이 API는 소품 드릴링이라는 한 가지 문제를 해결하는 데 도움이 됩니다. 간단히 말해서 Props 드릴링은 props를 구조 내 깊숙이 전달하는 방법입니다. 예를 들어 구성 요소에 대한 일종의 테마, 특정 언어에 대한 현지화, 사용자 정보 등이 될 수 있습니다. Context 이전에(또는 오히려 실험적이지 않게 되기 전에) 부모에서 자식으로, 마지막 리프까지 재귀적인 방식으로 전달하여 드릴다운했습니다(문제를 해결할 수도 있는 Redux가 분명히 있었습니다). 이 기능은 소품 드릴링만 해결하며 Redux 또는 Mobx와 같은 것을 대체하지 않습니다. 분명히 상태 관리 라이브러리를 사용하고 있었다면 자유롭게 교체할 수 있습니다.

마무리

이것으로 React 튜토리얼의 첫 번째 부분을 마칩니다. 다음 기사에서는 스타일 지정 및 유형 확인에서 프로덕션 배포 및 성능 최적화에 이르기까지 고급 주제를 다룰 수 있기를 바랍니다.

관련: 제어 유지 관리: Webpack 및 React 가이드, Pt. 1