ReactJS Hooks 101

17 Aug 2020

Reading time ~4 minutes

ReactJS Hooks 101

8.hooks from Daniel Lim

bg right h:270 임광규

Hooks

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 상태 관리를 할 수 있는 useState, 랜더링 직화 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.

useState

함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해줍니다.

다음과 같이 사용합니다.

const [value, setValue] = useState(0);

관리해야할 상태가 여러 개라면 useState를 여러번 사용하면 됩니다.

useEffect

리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다. 클래스 컴포넌트의 componentDidMount와 componentDidUpdate를 함친 형태로 보면 됩니다.

마운트 될때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 처음 랜드링 될 때만 실행하고, 업데이트 될때는 실행하지 않으려면 함수의 두번째 파라미터를 비어 있는 배열로 넣어주면 됩니다.

useEffect(() => {
  console.log('마운트 될때만 실행');
}, []);

특정 값이 업데이트 될 때만 실행하고 싶을 때

두 번째 파라미터로 전달되는 배열 안에 감시하고 싶은 값을 넣어주면 됩니다.

// name 값이 변화할 때마다 호출 됩니다.
useEffect(() =>{
 console.log(name);
}, [name]);

뒷정리 하기

useEffect는 랜더링이되고 난 직후 마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행 조건이 달라 집니다. 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup) 함수를 반환해주어야 합니다.

useEffect(() => {
  console.log('effect');
  console.log(name);
  return () => {
    console.log('effect');
    console.log(name);
  }
})

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hooks 입니다. useReducer는 현재 상태, 그리고 업데이트에 필요한 정보를 담은 Action 값을 전달받아 새로운 상태를 반환하는 함수입니다. 새루운 상태를 만들 때는 반드시 불변성을 지켜 주어야 합니다.

function reducer(state, action){
  return { ... }; // 불변성을 지키면서 업데이트를 한 새로운 상태를 반환
}

useReducer Action

Action 값은 다음과 같은 형태로 이루어집니다.

{
  type: 'ACTION_NAME',
  // 다른 값들이 필요하다면 추가로 들어감
}

useReducer 사용 예제(카운터)

import React, { useReducer } from "react";

const reducer = (state, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { value: state.value + 1 };
    case "DECREMENT":
      return { value: state.value - 1 };
    default:
      return state;
  }
};
export default function App() {
  const [state, dispatch] = useReducer(reducer, { value: 0 });
  return (
    <div className="App">
      <h1>value : {state.value}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+1</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-1</button>
    </div>
  );
}

useReducer 사용 예제(인풋상태 관리)

import React, { useReducer } from "react";

const reducer = (state, action) => {
  return {
    ...state,
    [action.name]: action.value
  };
};
export default () => {
  const [state, dispatch] = useReducer(reducer, { name: "", nickname: "" });
  const { name, nickname } = state;
  const onChange = (e) => {
    dispatch(e.target);
  };

  return (
    <div>
      이름 :
      <input name="name" value={name} onChange={onChange} /> :: {name}
      <br />
      별명 :
      <input name="nickname" value={nickname} onChange={onChange} /> :: {nickname}
    </div>
  );
};

useMemo

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산에 대하여 최적화를 할 수 있습니다.

const value = useMemo(() => {
  ... // 연산 처리
  return SomeValue;
}, 
[] // 연산 재처리 trigger
);

useCallback

useMemo와 상당히 비슷한 함수입니다. 주로 랜더링 성능을 최적화해야 하는 상황에서 사용합니다. 예) 이벤트 핸들러 함수를 필요할 때만 생성할 수 있습니다.

컴포넌트가 리랜더링될 때마다 컴포넌트 내부의 함수들이 새로 생성됩니다. 대부분의 경우 이러한 방식은 문제 없지만, 컴포넌트의 랜더링이 자주 발생하거나 랜더링 할 컴포넌트의 갯수가 많아지면 이부분을 최적화 해준ㄴ 것이 좋습니다.

const value = useCallback(() => {
  ... 
}, []);

useMemo VS useCallback

userCallback은 useMemo로 함수를 반환하는 상황에서 더 편하게 사용할 수 있는 Hook 입니다. 아래는 동일한 동작을 하는 코드 입니다. ```js useCallback(() => { console.log(“hello world!”); }, []);

useMemo(() => { const fn = () => { console.log(“hello world!”); }; return fn; }, []);

> 숫자, 문자열, 객체처럼 **일반적인 값을 재사용**하려면 ```useMemo```를 사용하고, **함수를 재사용**하려면 ```useCallback```을 사용하세요.

---

# useRef

> 함수형 컴포넌트에서 ```ref```를 쉽게 사용하 수 있도록 해줍니다.

```js
import React, { useRef, useEffect } from "react";

export default () => {
  const input = useRef(null);
  useEffect(() => {
    input.current.focus();
  });
  return (
    <div>
      <input type="text" ref={input} />
    </div>
  );
};

로컬 변수 사용하기

로컬 변수를 사용해야 할때도 useRef를 활용할 수 있습니다. 로컬 변수란 랜더링과 상관없이 바뀔 수 있는 값을 의미합니다.

import React, { useRef } from "react";

export default () => {
  const localData = useRef([]);
  const setLocalData = (list) => {
    localData.current = [...list];
  }
  const printLocalData = () => {
    localData.forEach(e => console.log(e));
  }
  return (
    <div>
      HELLO
    </div>
  );
};

커스텀 Hooks 만들기

여러 컴포넌트에서 비슷한 기능을 사용해야 할 경우, 커스텀 Hook으로 작성하여 로직을 재사용 할 수 있습니다.

useInputs

import { useReducer } from "react";

const reducer = (state, action) => {
  return {
    ...state,
    [action.name]: action.value
  };
};
export default (initalForm) => {
  const [state, dispatch] = useReducer(reducer, initalForm);
  const onChange = e => {
    dispatch(e.target);
  }
  return [state, onChange];
}

useInputs 사용

import React from "react";
import useInputs from './useInputs';

export default () => {
  const [state, onChange] = useInputs(reducer, { name: "", nickname: "" });
  const { name, nickname } = state;
  
  return (
    <div>
      이름 :
      <input name="name" value={name} onChange={onChange} /> :: {name}
      <br />
      별명 :
      <input name="nickname" value={nickname} onChange={onChange} /> :: {nickname}
    </div>
  );
};

다른 Hooks

정리

리액트에서 Hooks 패턴을 사용하면 클래스형 컴포넌트를 작성하지 않고도 대부분의 기능을 구현 할 수 있습니다. 또한 메뉴얼에서는 새로 작성하는 컴포넌트의 경우 함수형 컴포넌트와 Hooks를 사용할 것을 권장하고 있습니다.

reactjs