useRef

• useRef는 특정 DOM에 접근해 DOM 조작을 가능하게 하는 hook 입니다.
  리액트 프로젝트에서도 특정 요소를 선택해야 하는 상황이 생길 수 있는데 이러한 상황에서는 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;

useMemo, useCallback

useMemo와 useCallback은 모두 memoization(동일 계산의 경우 저장해 반복수행력을 낮추는 것)으로 성능개선을 위해 많이 사용합니다. (세이브 로드 신공?)

그래서 useMemo나 useCallback hook을 적절하게 사용하면 중복된 연산을 피할 수 있어 애플리케이션의 성능을 최적화할 수 있습니다. useMemo와 useCallback이 비슷한 동작을 하지만 차이도 있습니다.

useMemo는 memoization된 값을 반환하고
useCallback은 memoization된 함수를 반환합니다.