React 앱을 Hook으로 리팩토링 - 1부

React 클래스 구성 요소는 내장된 상태 및 props로 데이터를 관리할 수 있지만 애플리케이션에서 더 복잡한 데이터를 사용하는 경우 Redux도 이를 관리하는 데 도움이 될 수 있습니다. 그러나 Redux는 매우 장황하므로 Hooks는 코드 줄을 줄이는 데 도움이 될 수 있습니다. 이것이 React에서 애플리케이션 데이터를 관리하는 표준 방법이 된 이유입니다. 내가 탐색할 Hooks는 useState() , useEffect() 입니다. 이를 사용하면 Redux와 함께 클래스 기반 React에서 작업하는 리팩터링이 가능하기 때문입니다. 그러나 지금은 useState() 및 useEffect()부터 시작하겠습니다.

클래스 기반에서 기능적인 React로 리팩토링

후크에 액세스할 수 있는 첫 번째 단계는 구성 요소를 클래스에서 함수로 변경하는 것입니다. 따라서 구성 요소는 다음과 같이 변경됩니다.

import React, {Component} from 'react';

class App extends Component{

 renderText = () => {
  return <p> I am a React class component </p>
 }

 render(){
  return(
   {this.renderText()}
  )
 }
}

에게:

import React from 'react';

const App = () => {

 const renderText = () => {
  return <p> I am a React arrow function component </p>
 }
 return(
  {renderText()}
 )
}

// or 

function App(){

 function renderText(){
  return <p> I am a React functional component </p>
 }
 return(
  {renderText()}
 )
}

따라서 React Component 클래스에서 상속할 필요가 없으며 render 메서드를 사용하지 않고 HTML 태그가 포함된 return 문만 사용합니다. 또한 우리는 더 이상 this를 사용하지 않고 기능적 React에서 클래스 메소드에 액세스합니다. 메소드는 기능 구성 요소의 로컬 범위에서 정의되기 때문입니다.

사용 상태()

이것은 아마도 가장 기본적인 Hook이며 클래스 기반의 상태 객체를 대체합니다. 클래스 구성 요소에서 상태를 사용하는 방법은 다음과 같습니다.

import React, { Component } from 'react';

class App extends Component{
 state = {
  state1: "some changing value by/for the user",
  state2: "etc.."
 }

 handleClick(){
  setState({
   state1: "state1 changed after we clicked on the button"
  })
 }

 render(){
  return(
   <button onClick={this.handleClick}> Click me to change the following text! </button>
  <p> {this.state.state1} </p>
  )
 }
}

그리고 이것을 기능적 JS로 작성하여 동일한 기능을 달성할 수 있습니다(화살표 기능이 선호됨).

import React, { useState } from 'react';

const App = () => {

 const [state1, setState1] = useState("some changing value by/for the user")
 const [state2, setState2] = useState("etc...")

 const handleClick = () => {
  setState1("state1 changed after we clicked on the button")
 }

 return(
  <button onClick={handleClick}> Click me to change the following text! </button>
  <p> {state1} </p>
 )
}

상태를 변경하기 위해 setState()를 사용하지 않지만 각각의 특정 상태 속성을 변경할 수 있는 고유한 메서드(예: setState1 및 setState2 )의 이름을 지정합니다.

useState() 후크를 사용하면 코드의 관련 줄이 크게 줄어들지 않을 수 있지만 this.state 클래스 메서드를 로컬로 관리하려는 속성의 직접적인 이름(예: state1 , state2 )으로 대체할 수 있습니다. 컴포넌트의 상태.

사용 효과()

이 후크는 좀 더 복잡하며 클래스 기반 React의 수명 주기 메서드를 대체합니다. useEffect()가 componentDidMount()처럼 작동하려면 후크에 두 번째 인수로 빈 배열만 추가합니다. useEffect(()=>{},[]) . 이를 통해 로드된 DOM 노드에서 데이터를 렌더링하는 백엔드에 대한 비동기 가져오기와 같이 DOM이 이미 렌더링되어야 하는 함수를 호출할 수 있습니다. componentDidUpdate() 처럼 작동하려면 값이 useEffect(()=>{},[value]) 와 같이 변경될 때 콜백을 트리거할 값을 배열에 추가합니다. 마지막으로 componentWillUnmount()처럼 작동하려면 부작용을 취소하는 함수를 반환하면 됩니다.

클래스 기반 React의 componentDidMount() 수명 주기 메서드는 다음과 같습니다.

import React, { Component } from 'react';

class App extends Component{

 state = {
  username: ''
 }

 componentDidMount(){
  fetch('some.api/data')
   .then(response => response.json())
   .then(data => this.setState({username: data.username})
 }

 render(){
  return(
  <p> {this.state.username} </p>
  )
 }
}

그리고 후크에 대한 리팩토링은 다음과 같습니다.

import React, { useState } from 'react';

const App = () => {

 const [username, setUsername] = useState("")

 useEffect(()=>{
  fetch("some.api/data")
   .then(response => response.json())
   .then(data => setUsername(data.username)
 }, [])

 return(
  <p> {username} </p>
 )
}

여기에서는 주요 React Hooks 중 일부인 useState() 및 useEffect() 두 개의 후크를 사용하고 상태가 있고 수명 주기 메서드를 사용하는 구성 요소의 리팩토링을 허용합니다. 이벤트로 콜백을 활성화하는 것과 같은 useEffect()의 추가 제어는 useRef()라는 다른 React 후크와 결합하여 달성할 수 있습니다. 또한 useCallback() 및 useMemo()는 계산 비용이 많이 드는 구성 요소의 성능을 개선하는 데 사용할 수 있지만 다른 시리즈의 게시물을 위해 남겨 둡니다.

나는 다음 블로그에서 Redux Hooks useSelector() 및 useReducer()를 다룰 예정이며, 이는 Hooks에 대한 React Redux 앱의 전체 리팩터링을 허용합니다.

봐주셔서 감사합니다!

Visit an example of a refactor in my project

저와 연결하려면:

또한 내 프로젝트 중 일부:

A project management app or "Team Todos" in React

A music-jam app in Vanilla Javascript

A community for fellow young fathers in Ruby on Rails

일부 참조 문서:
https://leewarrick.com/blog/react-use-effect-explained/
https://medium.com/trabe/react-useeffect-hook-44d8aa7cccd0
https://www.digitalocean.com/community/tutorials/react-converting-to-a-hook