React - Hooks의 useState, useRef, useEffect, useMemo, useCallback 차이

* 공통점

- 얘네 전부 조건문안에 넣으면 안되고, 반복문, 함수에 웬만하면 넣으면 안된다.

- 항상 최상위에 두기. 

- 다른 Hooks 안에서 또 다른애를 실행하면안된다.

 

* 차이점

1) useState

- 렌더링과 관련된 값.

 

2) useRef

- 렌더링과 관련되지 않은 일반 값

 

3) useEffect - 대상을 인자로(배열로) 받음.

- lifeCycle과 관련해 실행.

- 대상별로 수행할 일이 다르면 여러번 써도 된다.

- 대상배열이 빈 배열이면 바뀐 것이 없으니 다시 실행도 안된다.(무조건 componentDidmout 처럼 사용됨)

 

4) useMemo - 대상을 인자로(배열로) 받음

- 렌더링과 관련되지 않은 복잡한 결과 값을 기억.

- useMemo 안에서 쓰이는 state 들은 두번째 인자 속에 꼭 넣어야함.

 

5) useCallback  - 대상을 인자로(배열로) 받음

- useMemo는 값을 기억하지만, useCallback은 함수 자체를 기억.

- useCallback 안에서 쓰이는 state 들은 두번째 인자 속에 꼭 넣어야함.

- 자식컴포넌트에 props로 함수를 넘길 때에는 useCallback을 꼭 써줘야한다.

 

* useEffect 를 componentDidupdate 에서만 사용하고 싶을 때

const mounted = useRef(false);
useEffect(() => {
	if(!mounted.current){
    	mouted.current = true;
    }else{
    	// componentDidupdate 에서 실행할 로직
    }
}, [바뀌는 값])

useEffect 는 componentDidmount, componentDidupdate 모두에서 실행되기 때문에 값이 바뀐다면 처음에 두 번 실행될것이다. 따라서 mounted 값