<React> 💎 Hook

Hook이 React 버전 16.8에 새로 추가되었습니다. Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
Hook은 Class없이 React 기능들을 사용하는 방법을 알려줍니다.

React Hook은 function Component에서 state와 life cycle method등의 react 기능을 사용할 수 있도록 만들어졌습니다. React에서 기본적으로 제공되는 훅들은 대부분 use로 시작하는 함수들입니다.

• function Componet와 class Component 차이
  • state와 props 변경시 호출 범위
    • function
      함수 전체가 호출된다. 즉 지역 변수 함수 모두 호출된다.
    • class
      render 함수만 호출된다. 즉, 멤버 변수 함수는 호출되지 않는다.

Hook을 공부하기 위해 간단한 class Component를 Hook을 이용해서 function Component로 변경해보겠습니다.

주의사항

꼭 class Component 대신 function Component를 사용해야하는 것은 아닙니다. 더하여 기존에 class Component로 작성된 코드가 있다면 충분히 이해할 수 있어야 합니다.
다만 새로운 프로젝트를 진행하면 꼭 class Component가 필요한 상황이 아니라면 function Component를 사용하는 것이 좋습니다.

class Component(변경 전)

아래 적힌 코드는 +버튼을 누르면 숫자를 1씩 키워주는 간단한 Component를 나타내고 있습니다.

import React, {Component} from 'react';

class Plus{
  state = {
    number: 0
  }

  plus = () => {
    this.setState({number:this.state.number+1})
  }
  render(){
    const {number} = this.state;
    return(
      <>
        <h1>{number}</h1>
        <button onClick={this.plus}>+</button>
      </>
    );
  }
}

export default Plus;

function Component(변경 후)

• useState
  state를 이용하기 위해 useState를 사용합니다. useState에 변수의 초기값을 넣어주면 배열을 반환해줍니다. 그 배열에는 값과 그 값을 업데이트 할 수 있는 함수가 순서대로 담겨있습니다. state나 props가 변경되면 function Component의 특성상 useState도 다시 실행되지만 초기값으로 다시 돌아오진 않습니다. 그 이유는 따로 저장을 해두기 때문입니다.

• useRef
  Ref를 사용해야되는 상황에서 createRef를 사용하면 매번 새로운 reference를 만들어 좋지 않으므로 useRef라는 것을 사용합니다.
  현재 상황에서 ref를 사용할 필요없지만 예시를 위해 적용해보았습니다. ref를 굳이 사용해야 하는 상황이 아니라면 사용하지 않느 것이 좋습니다. 예를 들어 e.target으로 해결한다던가..

• useCallback
  button의 props로 사용된 콜백함수 plus도 매번 새로운 reference로 변경됩니다. 그런데 plus 함수의 내부를 살펴보면 어떤 변수에 대해서 직접적으로 조회하지 않습니다.이런 경우에는 useCallback을 이용하면 좋습니다. useCallback을 사용하면 메모리에 저장해두고 class Component의 멤버 함수처럼 동일한 reference의 콜백함수를 전달해줍니다.

import React, {useState} from 'react';

const Plus = () => {
  const [number, setNumber] = useState(0);
  const numRef = useRef();
  
  const plus = useCallback(() => {
    setNumber(number+1);
  });
  
  return (
    <>
      <h1 ref={numRef}>{number}</h1>
      <button onClick={plus}>+</button>
    </>
  );
}