React Hook 간단하게 알아보기

React Hook 이 React 16.8 부터 정식으로 추가 되었다.

React Hook 을 한마디로 요약하자면, class를 쓰지 않고, function에서 state 를 운용할 수 있는 기능이다.

클릭할때마다 Count 가 증가하는 간단한 코드를 만들어보자.

// javascript
import React, { Component } from 'react';
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.setCount = this.setCount.bind(this);
  }
  componentDidMount() {
    console.log(this.props, this.state);
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState, snapshot);
  }
  setCount(count) {
    this.setState({count: count + 1});
  }
  render() {
    const { count } = this.state;
    return (
      <div onClick={(e)=>{this.setCount(count)}}>
        {count}
      </div>
    );
  }
}
// <Counter title="테스트1">test1</Counter>
// componentDidMount:, {title: "테스트1", children: "test1"} {count: 0}
// componentDidUpdate:, {title: "테스트1", children: "test1"} {count: 0}
// componentDidUpdate:, {title: "테스트1", children: "test1"} {count: 1}

위와 같은 코드를 아래와 같이 바꿀수 있다.

// javascript
import React, { useState, useEffect } from 'react';
function HookCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(props, count);
    return () => {
      console.log("Clean up");
    };
  }, [count]);
  return (
    <div onClick={(e) => setCount(count + 1)}>
      {count}
    </div>
  );
}
// <CounterHook title="테스트2">test2</CounterHook>
// "Clean up"
// useEffect:, { title: "테스트2", children: "test2" }, 0
// "Clean up"
// useEffect:, { title: "테스트2", children: "test2" }, 1

Class로 작성한 Component 는 constructor 가 실행되고 나서, render 가 실행되기 때문에 재 랜더링시 render 함수에 있는 내용이 재 실행되지만, Function으로 작성한 Component 는 재 랜더링시, 함수 내의 모든 코드를 다시 실행한다.

하지만 이때 useState에 들어가는 값 0은 재 랜더링시에 count가 다시 0으로 갱신되지 않는다.

useState 에 대해 살펴보자

useState 는 현재 state 값과 state 업데이트 할 수 있는 함수를 반환 하며, 초기 State 값을 받는다.

const [state, setState] = useState(initialState);

setState 를 호출할 때마다, 재 렌더링 된다.

state 비교는 Object.is 알고리즘을 참조한다.

useEffect 에 대해 살펴보자

useEffect 는 렌더링된 이후 호출된다.

useEffect(didUpdateFunction, [비교 Values]?);

비교할 values 를 가지고 useEffect가 호출 될지를 결정할 수 있다.

componentDidMount, componentWillUnmount, componentWillUnmount 와 비슷하다.

useReducer 에 대해 살펴보자

Redux 와 비슷하다.

useReducer 는 useState와 비슷하게 동작한다.

const [state, dispatch] = useReducer(reducer, initialArg, init);

useReducer 는 reducer와 초기 State 를 받고, 반영될 State 와 Dispatch 를 반환한다.

Reducer 는 현재 State 와 Dispatch 로부터 받은 Action을 받아, 이후 반영될 State 를 반환한다.

Dispatch 에게는 Action을 넘길 수 있으며 useReducer의 reducer 가 처리된후 재 랜더링한다.

// javascript
import React, { useReducer } from 'react';
const initialState = {count: 0};
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function HookReducerCounter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </div>
  );
}

더욱 자세한 내용은 공식 문서를 참조할 수 있다.

https://reactjs.org/docs/hooks-intro.html