[React] Hooks 함수 정리

1. useState

상태 관리 도와주는 함수

import React, { useState } from 'react';
...

const [name, setName] = useState('');
const [member, setMember] = useState({
    name : '',
    pos : '',
    dept : '',
    phone : ''
});

const onChange = e => {
    const { value, name } = e.target;
    setMember({
      ...member,
      [name] : value
    });
};

 

2. useEffect

리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 수행 하도록 설정하는 함수

import React, { useEffect } from 'react';
...

useEffect(() => {
   getList(name);
}, [name]);
// name 값이 바뀔때마다 getList() 함수를 실행

 

3. useReducer

업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수

import React, { useReducer } from 'react';
...

function reducer(state, action){
	return{
    	...state,
        [action.name]: action.value
    };
}

 

4. useMemo

 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 하는 함수 (특정 결과값을 재사용)

import React, { useMemo } from 'react';
...

const avg = useMemo(() => getAverage(list), [list]);
// 배열에 내용이 바뀔때만 함수가 호출된다

 

5. useCallback

useMemo와 동일하게 렌더링 성능을 최적화하기 하는 함수 (특정 함수를 새로 만들지 않고 재사용)

import React, { useCallback } from 'react';
...

const onToggle = useCallback(
	name => dispatch(toggleAsync(name)), [dispatch]
);

 

6. useRef

ref를 쉽게 사용할수 있도록 도와주는 함수

📌 ref

HTML에서 요소에 id를 붙이는식으로 리액트에서도 DOM에 이름을 다는 방법

import React, { useRef } from 'react';
...

const Sample = () => {
	const id = useRef(1);
    const setId = (n) => {
    	id.current = n;
    }
}