React Hook 소개

이 블로그는 React Hooks에 대한 간략한 소개입니다. 예제에는 useState 및 useEffect Hooks가 포함됩니다. 더 많은 후크는 React의 Hooks API Referencehere에서 찾을 수 있습니다.

기능 대 클래스 구성 요소

일반적으로 Reactjs에서 상태를 사용할 때 클래스 구성 요소를 만들고 코드를 상태 객체에 저장해야 합니다. Hooks를 사용하면 일반 Javascript 기능 구성 요소에서 상태를 만들 수 있습니다. 또 다른 이점은 후크에서 초기화된 함수가 클래스 생성자 내부에 바인딩하지 않고 범위를 유지한다는 것입니다. 이러한 기능은 더 깨끗하고 덜 거친 코드를 허용하기 때문에 유용합니다.

다음은 기능적 구성 요소와 클래스 구성 요소로 만든 React 기능을 비교한 것입니다.

후크가 있는 기능 구성 요소

import React, { useState } from 'react';

export default function Example() {
  //declare a state
  const [action, setAction] = useState(['blog']);

  const handleClick = () => {
    if(action === 'blog'){
      setAction('run');
    } else if (action === 'run'){
      setAction('blog');
    }
  }
  return (
    <div>
      <p>Todo: {action}</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

클래스 구성 요소

import React, { Component } from 'react';

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      action: 'blog',
    }
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    if(action === 'blog'){
      this.setState({action: 'run'});
    } else if (action === 'run'){
      this.setState({ action: 'blog' });
    }
  }
  render() {
    const action = this.state.action;
    return (
      <div>
        <p>Todo: {action}</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

라이프사이클

ComponentDidMount와 같은 주요 React 수명 주기 이벤트 동안 코드를 실행하려면 Hook useEffect를 호출하면 됩니다. React는 "componentDidMount 및 componentDidUpdate와 달리 useEffect에 전달된 함수는 지연된 이벤트 동안 레이아웃 및 페인트 후에 실행됩니다."라고 설명합니다. 필요한 경우 배열 리터럴을 useEffect의 인수로 추가하면 useEffect가 예제 구성 요소가 로드될 때만 호출되어야 함을 지정합니다. 이는 useEffect가 무한히 호출되는 부작용을 방지할 수 있습니다.

import React, { useState, useEffect } from 'react';

export default function Example() {
  //declare a state
  const [action, setAction] = useState([]);

  //API Request
  const someAsyncFunction = async () => {
    try {
      const result = await someApiResult();
      setAction(result);
    } catch (error) {
      //do somethings with the error
    }
  }

  useEffect(()=>{
    someAsyncFunction();
  }, []); // can be called with or without the array literal

  return (
    <div>
      <ul>
        ToDo:
        <li>{action}</li>
      </ul>
    </div>
  );
}

React Hooks의 규칙

Reactdocumentation는 애플리케이션에 대한 모범 사례를 보장하기 위한 몇 가지 규칙을 간략하게 설명합니다.

기능 구성 요소 사용

단일 구성 요소에서 여러 State 및 Effect Hook을 사용하는 것은 괜찮습니다.

이것이 Hooks가 컴포넌트의 최상위 레벨에서 호출되어야 하는 이유입니다.

루프, 조건 또는 중첩 함수 내에서 후크를 사용하면 안 됩니다.

결론

이 간단한 소개가 도움이 되었기를 바랍니다. React Hooks 문서에서 더 많은 것을 읽을 수 있습니다.