메모이제이션(Memoization): 리렌더링이 많아질수록 성능이 저하되기 때문에 리렌더링이 필요 없는 것들은 리렌더링을 막을때 사용 (useCallback(),useMemo(),memo())
useCallback(),useMemo()
불필요한 값들이 지속적으로 다시 만들어지지 않도록 유지시켜주는 hooks
useCallback(()=>{
다시 만들어 지지 않을 함수
},[])
useMemo(()=>{
다시 만들어 지지 않을 변수
},[])useEffect처럼 사용하면 된다
단, 이전에 불러왔던 값을 유지시키기 때문에
useCallback사용시 setState는 setState(state + 1)이 아닌
setState((prev)=>prev + 1)을 해야한다
컴포넌트를 import 해서 사용할때 부모가 리렌더링 되면 해당 컴포넌트도 같이 리렌더링 된다
이것또한 memo()를 이용하여 리렌더링 안되게 막을수 있다
useMemo,useCallback,memo 들은 값이 변경이된걸 props 같은걸로 값을 넘겨주게 되면 memo를 사용했어도 리렌더 된다
그러면 모든곳에서 사용하면 될까 라고 생각할수도 있지만
그러면 메모는 다른곳에 저장을 시켜두는것이기 때문에 모든곳에 적용시키면 쓸데없는 메모리를 잡아먹고 있는거다
