리액트 훅(Hook)에 대해서( useState(), useEffect(), useMemo(),useRef() )

 

Hook의 네이밍 규칙은 use~가 반드시 붙어야 한다. 

 

 

Hook

useState() : state를 사용하기위한 훅 

useEffect() : 사이드 이팩트를실행하기 위한 훅, 라이프사이클 함수 기능 수행 

useMemo() : 연산량이 많이 드는 호출을 저장해두었다가 이전에 저장해놓은 호출결과를 반환하는 훅 

 

 

---

 

useEffect() 

useEffect(() => {

    // 컴포넌트가 마운트 된 이후 실행됨 
    // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨 
    // 의존성 배열에 빈 배열 ([])을 넣으면 마운트와 언마운트시에 단한번씩만 실행됨
    // 의존성 배열 생략시 컴포넌트 업데이트 시마다 실행됨


    return () => {

	    // 컴포넌트가 마운트 해제되기 전에 실행됨 
    }

}, [의존성 변수1, 의존성 변수2, …]);

*side effect에서 실행되어야 하는것 : 정보를 받아오는것들 등 

 

 

---

 

useMemo()

useMemo() {
	() =>{
   	 	// 연산량이 높은 작업을 수행하여 결과를 반환 
    		return computeExpensiveValue(의존성 변수1, 의존성 변수2);
	},
    [의존성변수1, 의존성변수1]
};

*랜더링이 일어나는 동안 실행됨 (useEffect()에서 실행되어야할 수동으로 dom변경 등의 작업 )

*의존성 배열이 없는 경우는 무의미함 -> 아래 두 경우 

 

함수의 의존성 배열의 유무에 따른 동작 방식

useMemo( (), [빈배열] ) 
: 마운트 시점 한번만 실행됨 

useMemo()
: 의존성 배열을 넣지 않을 경우, 매 렌더링 마다 함수가 실행됨 

 

 

 

 

useCallback()

:useMemo()와 유사하지만 값이 아닌 함수를 반환 

useCallback(
	() =>{
   	 	dosomething (의존성 변수1, 의존성 변수2);
	},
    [의존성변수1, 의존성변수1]
)

 

 

 

useCallback(함수, 의존성배열); 은 useMemo(()=>함수, 의존성배열); 과 동일한 역할을 한다고 볼 수있다.

 

 

---

 

useRef() 

: 특정 컴포넌트에 접근 가능한 객체, 

리액트 함수 컴포넌트 내부에서 렌더링과 관계없는 값을 저장하기 위한 용도로 많이 사용한다고 한다. 

 

BUT 해당 함수는 돔 노드의 변화를 알 수 없다. 

Dom 노드의 변화를 알기위해서는 callback ref방식 사용해야한다. 

즉, ref 태그에 useCallback()훅을 이용하여 변경을 감지할 . 수있도록한다. 

 

import {useCallback} from 'react';

function MyComp () {
	const myRef = useCallback( (node) => {
    	doSomething~ 
     }, []);
     	
     return <div ref = {myRef}> Hello, world!</div>
 }
 
 export default MyComp;

 

 

---

 

hook의 규칙 

- 최상위 레벨에서만 호출해야한다. 

  React component의 최상위 레벨! 

  매번 같은 순서로 호출되어야한다.

ex.조건문에 hook이 들어갈 수 없음 -> if문에서만 걸리는 경우만 호출되면 안됨 

 

- 함수 컴포넌트 에서만 호출해야한다. 

 

 

Eslint-plugin-react-hooks
hook사용 플러그인 추천