Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

React 구성 요소 – 기능 대 클래스

React-js 은 개발자가 코드를 캡슐화하여 재사용성을 높일 수 있게 해주는 JavaScript 프레임워크입니다. 이러한 캡슐화된 코드 조각을 이라고 합니다. 구성요소 <엠>. 그들은 에서 일어나는 일을 방해하지 않고 자신의 논리와 상태를 유지할 수 있습니다. 문서 개체 모델(DOM) <엠>.

웹사이트의 일부를 이러한 작은 크기의 구성요소로 추상화하여 데이터를 전달하면 코드를 재사용할 수 있고 더 건조하게 만들 수 있습니다( 디 하지 알 이피트 예 자신). React에서 접하게 되는 두 가지 주요 유형의 구성 요소가 있습니다. 바로 기능 및 클래스 구성 요소입니다.

매우 높은 수준에서 React 구성 요소는 기본적으로 props를 허용하는 JavaScript 함수입니다. 매개변수로 사용하고 일부 React 요소 반환 기본적으로 화면에 표시되어야 하는 내용을 설명합니다. 

import React from 'react';
import ReactDOM from 'react-dom';
 
const Greeting = (props) => {
   return (
       <div>
           Hello, {props.name}
       </div>
   );
};
 
const element = <Greeting name="Yolanda" />;
 
ReactDOM.render(
   element, document.getElementById('root')
)

이 경우 React 요소는 <div> 입니다. 일부 텍스트와 함께. 해당 텍스트는 구성 요소에 전달된 props 개체를 사용합니다. 그 props 객체는 부모로부터 자식 구성 요소로 데이터를 전달합니다.

이 경우 전달된 소품은 name.입니다. 요소 부모를 나타냅니다.

<Greeting에 전달하는 모든 속성 /> 구성 요소는 props 개체로 만들고 Greeting 내부에서 사용할 수 있습니다. 이것은 우리가 구성 요소에 원하는 이름을 전달할 수 있기 때문에 Greeting을 매우 재사용할 수 있게 합니다.

기능 구성요소

앞서 언급했듯이 기능 구성 요소는 기본적으로 JavaScript 기능입니다. React 구성 요소를 생성할 때 EcmaScript 5(ES5) 또는 EcmaScript a6(ES6) 구문을 사용할 수 있습니다. 경험에 따르면 React 구성 요소는 실제로 구성 요소임을 나타내기 위해 대문자로 표시해야 합니다. 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic React Component</title>
  
</head>
<body>
   <!-- App is inserted at thr root node -->
   <div id="root"></div>
  
   <!-- React CDN -->
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
   <!-- React-DOM CDN -->
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  
   <!-- React Components can be rendered here -->
   <script async>
       'use strict';
 
       const element = React.createElement;
 
       function Greeting() {
           return element('h4', null , `Hello, World!`);
       };
 
function App() {
           return element(Greeting);
       };
 
 
       const domContainer = document.querySelector('#root');
           ReactDOM.render(element(App), domContainer);
   </script>
</body>
</html>

이것은 JSX가 아닌 일반 바닐라 JavaScript를 사용하지 않을 때 ES5 기능 구성 요소가 어떻게 보이는지에 대한 조롱된 작업 예제입니다. HTML에서 무슨 일이 일어나고 있는지 너무 걱정하지 마십시오. JavaScript 로직에 집중하세요. 생성되는 요소가 있고, 무언가를 반환하는 함수가 있고 그 함수는 일종의 ReactDOM으로 렌더링됩니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

JSX(JavaScript XML Extension의 줄임말)는 기본적으로 JavaScript에 HTML을 작성하여 HTML에서 보는 것과 더 유사하게 만드는 것입니다. 위의 코드 예제에서는 순수하게 JavaScript를 사용하여 HTML 요소를 만든 다음 React의 createElement 메서드를 사용하여 <h4>를 삽입합니다. <div id=”root />. 

응용 프로그램을 확장하면 응용 프로그램을 실제보다 훨씬 크게 만들 수 있습니다. 이러한 유형의 작성은 상당히 빨리 복잡해집니다. JSX는 기본적으로 React.createElement 메서드에 대한 구문 설탕으로 만들어졌으며 앱을 훨씬 빠르게 확장할 수 있습니다.

기능 구성 요소는 ES5 또는 ES6으로 작성할 수 있습니다. 다음은 JSX를 사용하여 ES5 및 ES6 기능 구성 요소가 어떻게 보이는지에 대한 예입니다.

ES5 기능 구성요소

import React from 'react';
import ReactDOM from 'react-dom';
 
function Animal(props) {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       function App() {
               return <Animal name="Marshmallow"/>
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

ES6 기능 구성요소

const Animal = (props) => {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       const App = () => {
               return <Animal name="Marshmallow"/>
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

React v.16 이전에는 기능 구성요소를 상태 비저장이라고 했습니다. 구성 요소. 이는 구성 요소의 주요 목적이 페이지에서 보기 좋게 표시되는 것임을 의미합니다. 종종 데이터는 이러한 기능 구성 요소에 전달되어 사용자 인터페이스에 무언가를 표시할 수 있습니다.

React v.16의 등장으로 모든 것이 바뀌었습니다. 우리는 그것에 대해 잠시 후에 다룰 것입니다. 지금 당장은 기능 구성 요소가 부모 또는 일부 전역 개체에서 일종의 데이터를 수신하여 클라이언트에게 무언가를 제공하기 위해 존재한다는 것을 알아두십시오.

클래스 구성요소

클래스 구성 요소는 "그냥" JavaScript 함수보다 조금 더 복잡합니다. React의 클래스 구성 요소는 ES6 JavaScript 클래스의 개념을 차용합니다. JavaScript에서 클래스의 구조는 연결된 속성과 메서드가 있는 거의 객체입니다. 우리는 this를 사용합니다. 키워드를 사용하여 해당 개체의 인스턴스에 액세스하고 개체와 상호 작용할 수 있습니다.

React에서는 대부분 구조가 동일합니다. React 클래스 구성 요소는 개체의 인스턴스이며 이 개체에는 상태라고 하는 것이 있습니다. 높은 수준에서 상태는 구성 요소가 보유하는 데이터일 뿐입니다. 속성을 설정하고 클래스에 바인딩하는 또 다른 방법으로 생각하십시오. 그런 다음 개발자는 해당 데이터로 원하는 모든 작업을 수행할 수 있습니다. 화면에 표시하고, 다른 구성 요소에 전달하고, 다른 논리를 수행하는 데 사용하는 등의 작업을 수행할 수 있습니다.

ES6 클래스 구성 요소는 기능 구성 요소와 마찬가지로 항상 대문자로 표시됩니다. 이는 트랜스파일러가 구성 요소임을 알 수 있도록 하는 React 규칙입니다. React 자체에서 구성 요소 구조를 상속하기 때문에 확장해야 합니다. React의 Component 수업. 해당 코드 블록 내부에는 상태를 넣을 위치가 있습니다. 

import React from 'react';
import ReactDOM from 'react-dom';
import Name from './Name';
 
   // the 'this' keyword needs to be used when we are talking about an instance of a class. So it will go in front of your methods and state when referring to it in your render method.
class Animal extends React.Component {
   constructor(props) {
       super(props);
       this.state = {
           species: ['fox', 'tiger', 'bear', 'kangaroo', 'fish', 'cat', 'dog', 'squirrel']
       }
   }
  
 
   render() {
       return (
           <div>
               {this.state.species.map(animal => {
                   return <Name animal={animal}/>
               })}
           </div>
       )
   }
}
ReactDOM.render(<Animal />, document.getElementById('root'));

상태는 속성과 값으로 가득 찬 객체입니다. 여기 우리 주에는 종의 속성이 있으며 그 가치는 동물로 가득 찬 배열입니다. 이 배열을 참조하거나 이와 상호 작용하려면 this.state.species.를 사용합니다.

위의 클래스 구성 요소의 목적은 동물의 이름을 <Name />에 전달하는 것입니다. 요소. <Name /> 컴포넌트의 역할은 데이터를 받았을 때 그 데이터로 뭔가를 하는 것입니다. Animal의 상태는 기능적 또는 다른 클래스 구성 요소에 전달될 때 props 개체의 일부가 됩니다. 계속 전달되는 한 자식 구성 요소에서 액세스할 수 있습니다.

React에서 데이터는 상위 구성 요소에서 하위 구성 요소로 한 수준 아래로 흐릅니다. 부모의 손자 구성 요소에 데이터가 필요한 경우 다른 수준으로 전달해야 합니다.

React에서 클래스 구성 요소의 또 다른 기능은 상태를 추적하기 위해 수명 주기 메서드에 액세스하고 사용한다는 것입니다. React 라이프사이클은 일반적으로 생성(마운팅), 라이브(업데이트), 소멸(마운팅 해제)의 세 단계로 구성됩니다. 수명 주기 메서드의 각 단계에서 상태를 액세스 및/또는 변경하는 메서드가 있습니다.

  1. ComponentDidMount() – 상태를 초기화하기 위해 AJAX 요청/네트워크 요청을 만드는 수명 주기 메서드입니다. this.setState()를 사용하여 검색된 데이터를 상태로 로드합니다.
  2. ComponentDidUpdate() – 사용자가 애플리케이션과 상호 작용한 후 상태에 대한 모든 업데이트가 여기에서 발생합니다.
  3. ComponentDidUnmount() – 구성 요소가 마운트 해제될 때 발생하는 정리 함수입니다. 타이머, AJAX 요청 등을 처리합니다.

이보다 더 많은 수명 주기 방법이 있습니다. 나열된 방법은 주요 방법일 뿐입니다. 이러한 메서드에 대한 자세한 내용은 React 설명서를 참조하세요.

마지막으로 기능 구성 요소의 return 문과 달리 클래스 구성 요소는 render()를 사용합니다. 방법. 이 메서드는 ReactDOM.render()가 Animal 구성 요소를 전달하고 React가 해당 생성자를 호출한 후에 호출됩니다. 그런 다음 상태가 초기화되고 렌더링 메서드가 호출되어 실제로 화면에 내용을 넣습니다.

아휴! 그것은 많은 정보입니다.

React v. 16 이전 기능 구성요소를 기억하세요. 주로 프리젠테이션적이었습니다. 상태를 처리하지 않고 표시만 했습니다. 클래스 구성 요소는 우리를 위해 모든 상태 논리를 자세히 설명하고 정보를 소품으로 다른 구성 요소에 전달했습니다.

기능 구성 요소 및 useState()

2018년에 React는 React Hooks라는 아이디어를 도입했습니다. . 후크는 기능적 구성 요소 내에서 수명 주기 메서드와 상태를 활용하는 깨끗하고 간결한 방법입니다.

대부분의 모든 것이 지금까지 다룬 모든 것과 매우 유사합니다. 우리는 어떤 상태를 가지고 있고 그것으로 뭔가를 해야 하고 그것을 다른 곳으로 전달해야 합니다. 주요 목표는 동일합니다. 구문은 훨씬 깨끗합니다. 약간의 익숙해지기만 하면 됩니다.

내가 할 일은 이 사이트를 북마크에 추가하고, 연습하고, 수업 구성요소에 대해 몇 번 반복하는 것입니다. 정말 이해 React에서 데이터 흐름이 작동하는 방식을 확인하고 여기로 돌아와 상태 저장 기능 구성요소에 대한 학습을 ​​마칩니다. .

이전에 사용했던 코드로 시작해 보겠습니다. 

import React from 'react';
import ReactDOM from 'react-dom';
 
const Animal = (props) => {
           const element = <h1>My cat's name is {props.name}</h1>;
           return element;
      }
       const App = () => {
		const [ state, setState ] = useState('Marshmallow');
               return <Animal name={state}/>
 
       };
      const domContainer = document.querySelector('#root');
          ReactDOM.render(<App/>, domContainer);

우리는 두 가지 구성 요소가 있습니다. 하나는 동물이고 하나는 앱입니다. 앱이 Animal을 반환하고 값이 "Marshmallow"인 name이라는 소품을 전달하는 것처럼 보입니다.

믿거나 말거나, 이것을 상태 저장 논리로 변환하기 위해 우리가 해야 할 일은 많지 않습니다. 컴포넌트를 살펴보자. 우리는 다음 단계를 따를 것입니다:

import React, {useState} from 'react';

— 이 줄은 후크인 useState를 가져옵니다.

const [ state, setState ] = useState('Marshmallow');

– 이 줄은 상태를 초기화합니다. 여기서 State와 setState는 임의의 단어입니다. 원하는 이름을 지정할 수 있습니다. 값을 따서 이름을 지정하는 것이 일반적입니다.

– state는 우리의 실제 상태입니다. 초기 상태는 useState()의 괄호 안에 있습니다.

– setState는 this.setState()와 유사합니다. 이것은 우리가 애플리케이션을 통과할 때 상태를 변경하는 방법입니다. 

               return <Animal name={state}/>

– "Marshmallow"를 {state}로 바꿉니다. JSX에서 JavaScript를 작성해야 할 때 중괄호를 사용합니다. 여기에서 중괄호를 사용하면 변수를 전달할 수 있습니다.

클래스 구성 요소를 정의한 기능 중 하나인 React Lifecycle은 다양한 메서드와 함께 모든 메서드를 캡슐화하는 하나의 기본 훅으로 요약됩니다! useEffect() 훅은 그것이 있는 React 컴포넌트를 마운트, 업데이트 및 마운트 해제할 수 있습니다.

결론

React v. 16 이전에는 기능 구성 요소가 클래스 구성 요소에서 전달된 props를 제외하고 상태를 사용하지 않고 순수하게 프리젠테이션 뷰 레이어로 사용되었습니다. 클래스 구성 요소는 응용 프로그램의 모든 상태를 유지하고 데이터를 전달했습니다. 클래스 구성 요소는 React 구성 요소를 마운트, 업데이트 및 마운트 해제하는 수명 주기 메서드를 활용했습니다. 우리는 또한 버전 16에서 React에 의해 출시된 새로운 패턴인 React Hooks가 기능적 구성 요소가 상태를 저장하고 자체 버전의 수명 주기 메서드를 가질 수 있다는 것을 발견했습니다.

React Hooks가 점점 더 대중화되고 있기는 하지만 모든 다양한 유형의 구성 요소에 익숙해지는 것이 중요합니다. 레거시 코드는 아마도 한동안 클래스 구성 요소를 사용할 것이며 작업할 수 있도록 여전히 이해해야 할 것입니다!