useReducer, memo, useCallback

< useReducer, memo, useCallback >

 

useMemo와 useCallback은 한몸이라고 보면 된다.

 

memo는 오브젝트를를 캐시해둔다.(컴포넌트를 메모화한다)

 

useCallback은 함수 자체를 캐시한다. (함수를 메모화한다)

 

쓰는 이유는 컴포넌트가 랜더링 될 때 함수가 재정의되기 때문에 의미없이 컴포넌트가 상태의 변화를 느껴 재랜더링하는것을

 

캐시로 인해 막을수 있기 때문이다.

 

한번에 useMemo와 useCallback을 이용해서 로직을 짜는것은 어렵다. useState와 useEffect로 일단 구성하고 나중에 바꾸는 방식으로 작성해보자.

 

----

 

useReducer는 어떨때 써야할까?

 

체크박스에 체크가 일어났을때 이 체크에 대한 state를 가지고있다고 했을때 onChange에 setChecked를 두었다

 

<input type="checkBox" value={checked} onChange= {{)=>setChecked(checked => !checked)}/>

setter나 getter에는 비즈니스 로직이 가급적이면 최대한 없어야한다.

 

그런데 useState에서 setState(num+1) 이라고 적게된다면 num+1이 비즈니스로직이기 때문에 좋은코드가 아니다(하나의 함수는 하나의 비즈니스로직만 수행하는게 좋은데 이미 함수를 호출하는순간 두개의 비즈니스로직이 실행되기 때문이다.)

 

함수의 매개변수 사이에 비즈니스로직이 들어가면 안된다.

 

함수의 내용을 변경하고싶을때 사용하는게 useReducer이다.

 

const [checked, toggle] = useReducer(ckecked => !checked ,false);
const [cards, addCard] useReducer(card => [...cards, card], []);

//setter에 함수를 넣을 수 있다.

 

 

const [session, setSession] = useState(initValue);

const reducerFn = (session, payload)=>{

	switch(payload.command){ //command factory pattern
    	case "login": //case문은 block scope가 아니라 const let을 쓸 수 없다.
			return login(payload.email, payload.password); //session을 리턴한다
        case "logOut":
        	logOut();
        default: return session;
    }
}