REACT -- Hooks Guide w/ES6을 사용하여 클래스 구성 요소를 기능적 구성 요소로 변환

Demo
repo

React에서 클래스 구성 요소와 수명 주기 메서드는 지난 몇 년 동안 상당히 변경되었습니다. 종종 개발자는 레거시 코드와 기능 구성 요소 및 후크의 새로운 패러다임을 처리할 수 있습니다. 이 기사에서는 후크를 사용하여 클래스 구성 요소를 기능적 구성 요소로 변환하는 기본 예제를 사용합니다. Repo

규칙 기능 및 클래스 구성 요소

props는 읽기 전용이므로 동일한 props가 동일한 결과를 반환해야 합니다. props를 존중하는 구성 요소를 "순수"라고 합니다.

상태를 직접 변경하지 마십시오.

기능 대 클래스:

기능성 성분

함수형 프로그래밍 활용

기존의 return 문이 있는 함수

기능 구성 요소가 상태 비저장일 수 있음

일반적으로 상태를 업데이트(덮어쓰기)하는 useState 후크를 사용합니다.

UseEffect가 수명 주기 메서드를 대신합니다.

클래스 구성 요소

객체 지향 프로그래밍 활용

내장 JavaScript 클래스 메소드인 생성자 함수를 통해 객체를 생성합니다.

'class', 'constructor', 'super', 'this' 및 'new' 키워드가 필요합니다.

JSX가 render 문에서 반환됨

렌더링 수명 주기를 명시적으로 관리해야 합니다.

setState를 사용하고 상태를 병합합니다.

메서드 바인딩

앱.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Courier New', Courier, monospace;
  background-color: rgba(125, 137, 238, 0.877);
  color: whitesmoke;
  line-height: 1.6;
}

ul {
  list-style: none;
}
h1, h2 {
  text-align: center;
}
.container {
  max-width: 768px;
  margin: auto;
  padding: 0 20px;
}

앱.js

import './App.css';
import Dogs from './Dogs';
import Cats from './Cats';

const App = () => {
  return (
    <div className='container'>
      <h1>Class to Functional</h1>
      <Dogs />
      <Cats />
    </div>
  );
};

export default App;

클래스 구성 요소

고양이.js

import React from 'react';

class Cats extends React.Component {
  render() {
    return(
<>
<h1 style={{ color: 'blue' }}>A Class Component</h1>
<h1>Hello Cats</h1>
</>
)
  }
}
export default Cats;

기능 구성 요소 w/ES6

Dogs.js

import React from 'react';

const Dogs = () => {

  return (
<>
<h1 style={{ color: 'red' }}>A Functional Component</h1>
<h1>Hello Dogs</h1>
</>
)
};

export default Dogs;

클래스 및 기능 구성 요소를 렌더링하는 간단한 데모

State, Props 및 Lifecycle 메서드가 있는 클래스 구성 요소

고양이.js

import React from 'react';
import Kittens from './Kittens';


class Cats extends React.Component {
  constructor() {
    super();
    this.state = { color: 'yellow', name: 'Tartar', kittens:3 };
  }
  componentDidMount() {
alert('This componentDidMount to the DOM')
  }
  changeColor = () => {
    this.setState({color: "red"});
  }
  render() {
    return (
      <div>
        <h1 style={{ color: 'blue' }}>A Class Component</h1>
        <h2>Hello Cats</h2>
        <h2>
          Hello Cats. My name is {this.state.name} and I am the color {this.state.color}.
        </h2>
        <Kittens kittens={this.state.kittens}/>

        <button type='button' onClick={this.changeColor}>
          Class Change color
        </button>
      </div>
    );
  }
}
export default Cats;

(Kittens.js) 자식 클래스 구성 요소

Kittens.js

import React from 'react'

class Kittens extends React.Component{


render() {
    return 
<>
<h1 style={{ color: 'blue' }}>A Class Component</h1>
<h2>Tartar has {this.props.kittens} kittens</h2>
</>
}
}
export default Kittens;

클래스 구성 요소 Cats.js를 기능 구성 요소로 변경해 보겠습니다.

'ChangeCat.js'라는 새 구성 요소를 만들고 있습니다.

사이드 노트:
Kittens.js라는 자식 구성 요소는 클래스로 남아 있지만 여전히 ChangeCat.js에서 소품을 읽습니다. 더 나아가 패러다임과 일치하는 기능적 구성 요소로 Kittens.js를 변경할 수 있습니다.

앱.js

import './App.css';
import Dogs from './Dogs';
import Cats from './Cats';
import ChangeCat from './ChangeCat';

const App = () => {
  return (
    <div className='container'>
      <h1>Class to Functional</h1>
      <Dogs />
      <Cats />
      <ChangeCat />
    </div>
  );
};

export default App;

ChangeCat.js

import React, { useEffect, useState } from 'react';
import Kittens from './Kittens';
const ChangeCat = () => {
  const [catInfo, setCatInfo] = useState({
    name: 'Tartar',
    color: 'Yellow',
    kittens: 3
  });

  useEffect(() => {
    alert(
      "This was the componentDidMount in Cats.js but now it's coming from the ChangeCat.js useEffect to the DOM"
    );
  }, []);

  const handleClick = (e) => setCatInfo({ ...catInfo, color: e.target.value });

  return (
    <>
      <h1 style={{ color: 'red' }}>A Functional Component</h1>

      <h2>
        Hello Cats. My name is {catInfo.name} and I am the color {catInfo.color}
        .
      </h2>
      <Kittens kittens={catInfo.kittens} />
      <button type='button' value='red' onClick={handleClick}>
        Functional Change Color
      </button>
    </>
  );
};

export default ChangeCat;

요약

레거시 코드는 어렵습니다.

이 데모는 Dogs.js (기능적) 및 Cats.js (클래스) 구성 요소를 모두 React에서 사용할 수 있음을 비교했습니다.

상태를 포함하고, 자식 클래스 구성 요소에 props를 전달하고, 수명 주기 메서드를 포함하도록 더 복잡한 클래스 구성 요소를 만들었습니다.

Cats.js 클래스 구성 요소를 ChangeCat.js라는 기능 구성 요소로 변경했습니다.

최종 결과는 클래스 구성 요소 자식이 있는 기능 구성 요소ChangeCat.js입니다.

시도해 보고 나머지 클래스 구성 요소를 기능 구성 요소로 변환하십시오Repo.

링크 🔗

React Docs
Demo

❤️❤️❤️

사회의

Portfolio
Github

🤘
해피코딩