자주 쓰는 react Hooks 정리 : useEffect, useMemo

1. useEffect

1) 언제 사용하는가

특정 값이 변할 때마다 실행하고 싶은 이벤트가 있을 때.

 

2) 선언법

useEffect(()=>{
	//state가 업데이트될 때마다 실행하고 싶은 명령어
   		 console.log(state);
    
    //return은 option. 
    //컴포넌트가 화면에서 사라질(언마운트될) 때 혹은 업데이트되기 전 실행되는 함수를 return한다.
    //이를 cleanup 함수라고 한다. 
        return ()=>{
        console.log(state);
        }
    
},[state])

 

3) useEffect는 언제 실행되는가? 

useEffect 를 통해 렌더링 이후에 리액트가 실행해야 하는 함수를 지정할 수 있다. 이 함수를 effect라고 부름. 

useEffect는 기본적으로 첫 번째 렌더링과 이후의 모든 업데이트에서 수행된다. 

 

4) 다양한 사용법 CASE

- 처음 렌더링됐을 때만 실행하고, 이후에는 실행 안 됨. 

useEffect(()=>{
	console.log('처음 렌더링');
},[]);

- 배열 안에 여러 개의 변수가 있을 때, 하나라도 변경되면 실행. 

useEffect(()=>{
	console.log('처음 렌더링');
},[state1, state2]);

 

useEffect는 회사에서도 자주 사용하는 기능이다. 

 

2. useMemo

특정 변수가 변경되면 지정한 함수가 실행되는데, useEffect와 비슷하지만 return값이 다르다. return값은 스스로 지정할 수 있다. useMemo의 memo는 memoization에서 따왔음

 

메모이제이션(memoization)? 

메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다.

 

렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용한다. 

 

const getSum = (num1, num2) => {
	return num1 + num2; 
};

const [num, setNum] = useState(0);
const avg = useMemo(()=>getSum(1,2) , [num]); //이처럼 return값을 avg에 담을 수 있다.