useMemo, useCallback란?

memoization의 약자

언제 사용할까 ?

1. 개발 중 react가 함수형 컴포넌트를 다루기 때문에 렌더링 될 때 항상 필요없는 함수까지도 재호출되는 경우를 많이들 봤을 것이다.

   이건 지금 필요없는데 렌더링 안되게 막을 순 없을까?
   이럴 때 사용하는 게 useMemo다 .

2. 오브젝트 타입

   자바스크립트는 객체타입과 원시타입이 있다.

   객체타입은 int, const, boolean 같은 흔히 보는 것들이고

   원시타입은 array, object와 같은 객체 타입을 제외한 모든 것들이다.

   이 둘의 차이는 객체 타입은 데이터 그 자체를 저장하게 되는데 원시타입의 object 같은 경우

   {age : 12} 가 예시일 경우 object.age로 꺼내오지 않고 object만 가져올 경우 그 데이터가 들어있는 주소를 반환한다.
   (c언어의 포인터같은 개념인 것 같다.)

특징

1. 컴포넌트 최적화를 위한 react hook
2. 필요한 값을 캐싱해둬서 필요할 때마다 캐시에서 꺼내서 사용하는 것
3. 함수형 컴포넌트이다. (함수가 호출될때마다 모든 내부 변수는 초기화 된다. 그게 렌더링임)

차이점 : useMemo는 인자에 관해서 관리하는 것이고 useCallback은 함수 그 자체를 메모이제이션한다.

구조

const value = useMemo(() ⇒ {
	return calculate();
},[item]);

첫번째 인자 : 콜백함수 value에 return 값이 들어간다. 
두번째 인자 : 의존성 배열 [] 안에 있는 값의 변경 유무에 따라 실행 유무를 결정함

const test = useCallback(() ⇒ {
	return value;
},[item]);

첫번째 인자 : 콜백함수 value에 return 값이 들어간다. 
두번째 인자 : 의존성 배열 [] 안에 있는 값의 변경 유무에 따라 실행 유무를 결정함

useReducer?

언제 사용할까?

여러 개의 하위값을 포함하는 복잡한 state를 다룰 때 사용한다 .

reducer : 스테이트 업데이트 역할
dispatch : 리듀서에게 하는 요구 (dispatch를 누르면 reducer가 불린다.)
action : dispatch안에 들어갈 내용

const reducer = (state, action) => {
	console.log("dispatch 가 눌렸습니다.", state, action );
	// action.payload : number에 들어있는 값이 오고 , action.type : "add" 가 들어온다. 
}

const [number, dispatch] = useReducer(reducer, initialArg, init);
// state는 관리할 상태값 dispatch는 리듀서를 부르는 것 , reducer는 위에 const reducer, 초기값

<button onClick = {()=>{ dispatch({ type : "add" , payload : number});}}

ㄴ action 의 인자