react hooks

useState

const [data, setData] = useState<string>('');

배열의 첫번째 원소는 상태 값, 두번째 원소는 상태 설정 함수.

useEffect

useEffect는 특정 작업을 수행하도록 설정 할 수 있는 Hook이다. (componentDidMount, componentDidUpdate를 합친 형태)

componentDidMount

// didMount: 렌더링 될때만 실행
useEffect(() => {
    getList();
}, [getList]);

componentUnMount

useEffect(() => {
	return () => {
        // 데이터 초기화
    	initData()
    }
}, [initData]);

componentDidUpdate

usePrevious 함수

import { useEffect, useRef } from 'react';

export default function usePrevious<T>(state: T): T | undefined {
  const ref = useRef<T>();

  useEffect(() => {
    ref.current = state;
  }, [state]);

  return ref.current;
}

const [data] = useState('');
const prevData: string = usePrevious<string>(countryCode);

useEffect(() => {
    if (data !== prevData) {
      getData();
    }
  }, [data, prevData, getData]);

• react hooks: https://velog.io/@velopert/react-hooks