App() vs 클래스 App은 App.js 파일에서 컴포넌트를 확장합니다.

App() vs 클래스 App은 App.js 파일에서 컴포넌트를 확장합니다.

리액트(https://www.youtube.com/watch?v=sBws8MSXN7A - 2019년 1월 3일)에 대한 튜토리얼을 팔로우하고 있으며, 다음과 같이 리액트 앱을 만들었습니다.npx create-react-app *app_name* . 。App.jsfile 이 명령어가 튜토리얼을 제공하는 사람을 위해 생성된 명령어와 다릅니다.그 이후로 리액트가 바뀌었습니까, 아니면 잘못 다운로드 했을 가능성이 있습니까?

★★★App.js:

import React from 'react';
import logo from './logo.svg';
import './App.css';

    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }

export default App;

토얼의 tutorialApp.js:

import React, { Component } from 'react'; //different
import logo from './logo.svg';
import './App.css';

    class App extends Component { //different
      render() ( //different
        // The rest of the file is the same
        <div className="App"> 
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }

    export default App;

가장 명백한 차이는 구문입니다.함수 컴포넌트는 소품을 인수로 받아들여 React 요소를 반환하는 단순한 JavaScript 함수입니다.

클래스 구성 요소를 사용하려면 React에서 확장해야 합니다.구성 요소를 구성하고 React 요소를 반환하는 렌더 함수를 만듭니다.여기에는 더 많은 코드가 필요하지만 몇 가지 이점도 있습니다.

기능 컴포넌트에는 자체 상태가 없습니다.컴포넌트에 상태가 필요한 경우 클래스 컴포넌트를 작성하거나 부모 컴포넌트에 상태를 올린 후 소품을 통해 기능 컴포넌트를 전달해야 합니다.

기능 컴포넌트에서 사용할 수 없는 또 다른 기능은 라이프 사이클 후크입니다.그 이유는 상태의 경우와 같습니다.모든 라이프 사이클 훅은 React에서 발생합니다.클래스 컴포넌트에서 확장하는 컴포넌트.따라서 라이프 사이클 훅이 필요한 경우 클래스 컴포넌트를 사용하는 것이 좋습니다.

반대로 기능 컴포넌트는 클래스 컴포넌트가 허용되지 않는 후크를 사용할 수 있습니다.

React에서는 기본적으로 기능 컴포넌트와 클래스 컴포넌트의 두 가지 쓰기 방법이 있습니다.이 점만 빼면 예시와 다를 바 없다.

컴포넌트를 정의하는 방법에는 큰 차이가 있습니다.특정 React 컴포넌트의 상태와 관련되어 있습니다.

따라서 기능 기반 컴포넌트 => 특정 컴포넌트에 적용되는 변경에 대해 갱신되지 않기 때문에 상태 비저장 컴포넌트라고도 합니다.

이 <p>Hi, Welcome</p> 를 누르다<p>Welcome Back</p>기능 기반의 컴포넌트는 사용할 수 없습니다.

한편, 클래스 베이스 컴포넌트 =>는 스테이트풀 컴포넌트라고도 불리며 컴포넌트에 발생한 변경에 따라 갱신됩니다.

그래서 앞의 예제가 효과가 있을 겁니다.

개인적으로는 정적 데이터의 기능 컴포넌트와 동적 및 인터랙티브 데이터의 클래스 베이스 컴포넌트를 간단하게 기억할 수 있습니다.

분명한 차이는 구문에서 찾을 수 있으며, 힌트는 그 이름에서 유래한 것입니다.둘 다 JSX(HTML과 JavaScript를 쓰는 React의 방식)를 렌더링하지만 클래스 컴포넌트에 대해 확장 클래스를 정의합니다.React.Component도서관.또한 클래스 컴포넌트는 render() 메서드를 사용합니다.다음은 예를 제시하겠습니다.

App.js: 기능 컴포넌트

import React, { Component } from 'react';
import './App.css';

function App() {
    return (
        <h1>hello</h1>
    );
}

export default App;

App.js: 클래스 컴포넌트

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <h1>hello</h1>
        );
    }
}

export default App;

언급URL : https://stackoverflow.com/questions/56676457/function-app-vs-class-app-extends-component-in-the-app-js-file