React Hooks 소개

소개

React는 Facebook에서 만들고 유지 관리하는 오픈 소스 Javascript 라이브러리입니다. 2013년에 출시된 React는 동적 사용자 인터페이스와 구성 요소로 구성된 프런트 엔드 애플리케이션을 구축하도록 설계되었습니다. 구성 요소는 입력("props"라고 함)을 수신하고 DOM에 렌더링되는 방법과 대상을 설명하는 React 요소를 반환할 수 있습니다. 다양한 유형의 구성 요소와 구성 요소의 작동 방식을 이해하는 것은 React 후크를 사용하는 데 필수적입니다.

React 컴포넌트와 라이프사이클

React에는 클래스 구성 요소와 기능 구성 요소의 두 가지 유형의 구성 요소가 있습니다. 클래스 구성 요소는 마운트(구성 요소가 props 및 초기 상태로 초기화 및 렌더링됨), 업데이트(구성 요소가 변경되고 다시 렌더링됨) 및 마운트 해제(구성 요소가 삭제되고 페이지). 클래스 구성 요소는 수명 주기의 특정 단계에서 코드를 실행할 수 있는 특별한 "수명 주기"메서드에 액세스할 수도 있습니다.

class Clock extends React.Component {
  constructor(props) {
  // initialize component with props and initial state
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
  // run code after component has been rendered to the DOM
  // data fetching requests are usually here
  }

  componentWillUnmount() {
  // run code after component is removed from the DOM
  // cancel data fetching, clear a counter, etc
  }

  render() {
  // outputs component to the DOM (required lifecycle method)
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date}.</h2>
      </div>
    );
  }
}

전통적으로 클래스 구성 요소만 이러한 수명 주기 메서드와 상태 관리 기능에 액세스할 수 있었지만 후크가 도입되면서 변경되었습니다.

후크 설명

2019년 2월 React 버전 16.8과 함께 출시된 후크는 기능 구성 요소에서 React 상태 및 수명 주기 기능을 "연결"할 수 있는 기능입니다. 이것은 클래스의 필요성을 크게 없애고 더 간결하고 읽기 쉬운 코드로 이어집니다.

// Class component
import React, { Component } from "react"

class Example extends Component {
   constructor() {
      super();
      this.state = {
         name: "Jason"
      }
   }

   render() {
      return (
        <div>
         <p>Hi, my name is {this.state.name}!</p>
       </div>
      )
   }
}

export default Example

// Functional component with useState hook
import React, { useState } from 'react';

const Example = () => {
  const [name] = useState("Jason");

  return (
    <div>
      <p>Hi, my name is {name}!</p>
    </div>
  );
}

export default Example

Hook은 또한 "opt-in"으로, 클래스를 사용하는 기존 React 앱과 완전히 호환됩니다. 이를 통해 개발자는 손상에 대한 두려움 없이 이전 코드베이스에 대한 후크를 쉽게 실험하고 구현할 수 있습니다. React에는 많은 내장 후크가 포함되어 있지만 가장 일반적으로 사용되는 후크는 useState 및 useEffect 입니다.

사용 상태

useState 후크는 배열 분해를 사용하여 "상태 변수"를 선언합니다. 첫 번째 값은 상태로 할당하는 값이고 두 번째 값은 해당 상태를 변경하는 함수입니다. 상태 변수를 선언할 때 상태의 초기 값을 useState() 에 전달합니다.

// you must import hooks at the top of your component
import React, { useState } from 'react';

const Example = () => {
  // declaring a new state variable called "count", and "setCount" is a function that increments the state "count"
  const [count, setCount] = useState(0); // setting the initial state to 0

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example

사용 효과

useEffect 후크는 기능 구성 요소에서 부작용(데이터 가져오기, 이벤트 수신 또는 DOM 조작과 같은 구성 요소 외부 작업)을 수행할 수 있도록 하여 클래스 구성 요소의 수명 주기 메서드를 대체합니다. useEffect() 콜백 함수와 어떤 변수 변경 사항이 효과를 트리거할지 지정할 수 있는 선택적 배열을 사용합니다.

// with no second argument, runs the function on every component render
useEffect(() => {
   functionCall()
},)

// replaces componentDidMount by putting an empty array as second arg, side effect runs once
useEffect(() => {
   functionCall()
}, [])

// by adding variables into the second arg, React will only run the side effect if those variables changed
useEffect(() => {
   functionCall()
}, [watch, these, variables])

//replaces componentWillUnmount when returning a function to clean up side effects within callback
useEffect(() => {
   function doStuff() {
     //effect
   }
   return function cleanup() {
     //remove effect
   }
})

결론

React 후크를 사용하면 더 이상 클래스를 사용하여 React 구성 요소 내에서 상태를 관리하고 수명 주기 메서드에 액세스할 필요가 없습니다. 기능적 구성 요소를 사용하여 모든 작업을 수행할 수 있습니다. 코드가 더 깔끔하고 간결해지며 탐색하기 쉬워집니다. 그리고 무엇보다도 후크는 100% 이전 버전과 호환되며 주요 변경 사항이 포함되어 있지 않습니다. 따라서 새로운 또는 기존 React 애플리케이션에서 후크를 구현해 보십시오. 즐거운 코딩!