[React] 리액트 훅에 대해 알아보기(React Hooks란?)

1. React Hooks란?

리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다.

 

2. Hook 규칙

1) 최상위에서만 Hook을 호출해야한다.

• 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다.
• 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다. 
• 그렇기 때문에 이 규칙을 따르면 useState 와 useEffect가 여러번 호출되는 경우에도 Hook의 상태를 올바르게 유지할 수 있게 된다.

2) 리액트 함수 내에서만 Hook을 호출해야한다.

• Hook은 일반적인 js 함수에서는 호출하면 안된다.
• 함수형 컴포넌트나 custom hook에서는 호출 가능하다.

 

3. 자주 사용하는 React Hook 알아보기

1) useState

useState는 상태를 관리하는 훅으로 다음과 같은 특징을 가진다.

• 함수형 컴포넌트 안에 state를 추가하여 사용한다.
• 현재 상태를 나타내는 state값과 이 상태를 변경하는 setState값을 한 쌍으로 제공한다.
• state는 초기값을 설정할 수 있으며, 초기값은 첫 렌더링 때 한번 사용된다.
• state는 객체일 필요 없이 문자열, 숫자, boolean, 배열, null, 객체 등의 여러가지 다양한 값을 넣을 수 있다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      // 버튼을 클릭할 때마다 기존의 state 기본값인 0에 1이 더해진다.
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

2) useEffect

useEffect는 기존 클래스형 컴포넌트에서 사용했던 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 통합한 것으로 다음과 같은 특징을 가진다.

• useEffect는 기본적으로 useEffect(function, deps)의 형태를 사용한다.
• function에는 실행시킬 함수를 넣고 deps에는 의존성 배열을 담는다.
• 의존성 배열에 어떤 것이 담기느냐에 따라 부수적인 효과 함수가 실행된다.
• 가장 먼저 의존성 배열 없이 useEffect를 실행시키게 되면 페이지가 렌더링 될 때마다 데이터를 불러온다.

import React from 'react';

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
});

• 두번째로 의존성 배열에 빈배열을 담아주게 될 경우에는 첫 렌더링 시에만 함수를 실행한다.

import React from 'react';

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
}, []);

• 마지막으로 의존성 배열에 state값이나 props로 상속받은 데이터값 등을 담아주게 되면 해당값이 변할 때마다 함수를 실행한다.

import React from 'react';

const [page, setPage] = React.useState(1)

React.useEffect(() => {
  dispatch(getActions.getFundingAC(page));
}, [page]);

이 외에도 useEffect에서는 언마운트시에 cleanup함수를 적용시킬 수 있다.

import React, { useState, useEffect, useRef } from "react";

useEffect(() => {
    dispatch(getActions.getFundingDetailAC(fundId));
    return () => {
      dispatch(getActions.clean())
    }
}, []);

 

3) useRef

useRef는 특정 DOM에 접근하여 DOM 조작을 가능하게 하는 훅이다. 리액트 프로젝트에서도 특정 요소를 선택해야하는 상황이 생길 수 있는데 이러한 상황에서 useRef 함수를 사용할 수 있게 된다.

import React, { useState, useEffect, useRef } from "react";
import AudioPlayer from "react-h5-audio-player";
import "react-h5-audio-player/lib/styles.css";

const FundingDetail = () => {

  // 오디오플레이어에 접근하기 위함
  const player = useRef();
  
  // 오디오 플레이어 자동재생막기
  useEffect(() => {
    player.current.audio.current.pause();
  }, [fundingDetail]);
  
  return (
	<React.Fragment >
      {/* 오디오 플레이어 */}
      <AudioPlayer
        className="audio"
        autoPlay={false}
        src={fundingDetail.File}
        volume={1}
        showJumpControls={false}
        // useRef 사용을 위한 ref 지정
        ref={player}
      />            
    </React.Fragment >
  );
};

export default FundingDetail;

 

4) useMemo, useCallback

useMemo와 useCallback은 모두 메모이제이션과 관련이 있어 리액트를 사용하며 성능 개선을 위해 많이 사용한다. 여기서 메모이제이션이라는 것은 기존에 수행한 연산의 결과 값을 어딘가에 저장해두었다가 동일한 입력이 들어오면 재활용하겠다는 프로그래밍 기법이라고 할 수 있다. 그렇기 때문에 useMemo나 useCallback 훅을 적절하게 사용하면 중복된 연산을 피할 수 있어 애플리케이션의 성능을 최적화할 수 있다는 장점이 있다.

useMemo와 useCallback이 비슷한 동작을 하긴하지만 두가지의 차이도 존재한다. 먼저 useMemo의 경우에는 메모이제이션된 값을 반환하는 훅이고 useCallback은 메모이제이션 된 함수를 반환한다는 특징을 가진다.