UseMemo
예시 코드
const count = useMemo(() => countActiveUsers(users), [users]);
첫번째 파라미터 : 어떻게 연산할지 정의하는 함수
f countActiveUsers(users) {
console.log('활성 사용자 수 세는 중');
return users.filter((user)=> user.active).length;
}
두번째 파라미터 : deps의 배열을 넣어주면 된다.
[users]
[
{
id : 1,
username : "aaa",
email : "aaa@gmail.com"
}
{
id : 2,
username : "bbb",
email : "bbb@gmail.com"
}
{
id : 3,
username : "ccc",
email : "ccc@gmail.com"
}
]
이 배열 안에 넣은 내용이 바뀌면,
우리가 등록한 함수를 호출해서 값을 연산해주고
만약 내용이 바뀌지 않았다면 이전에 연산한 겂을 재사용하게 된다.
그래서 리렌더링이 되지 않기때문에 불필요한 호출도 없앨 수 있게 된다.
UseCallback
함수 재사용하기.
함수 안에서 사용하는 props가 있다면 최신 값 참조를 보장 받기 위해
꼭 deps에 포함 시켜줘야한다.
React.memo
컴포넌트 리렌더링 방지
사용법 - 각 컴포넌트마다 감싸주면 된다.
예시) export default React.memo(CreateUser);
해당 컴포넌트에 보내지는 props , 그 props이 바뀔때만 렌더링하게 할거야
부모 컴포넌트가 리렌더링 될 때, 자식도 리렌더링 될 상황에 놓인다.
만약 자식이 React.mome로 감싸져있다면
변화가 있는지 확인하는 Prop Check 를 하게 된다.
Prop Check :
변화가 있다면 - 리렌더링 O
변화가 없다면 - 리렌더링 X - 기존 값 재사용
여기서 주의할 점은 props의 변화에만 의존하기 때문에
useState , useReducer, useContext 와 같이 상태에 관한 훅을 사용한다면
리렌더링을 하게 된다.
React.memo + useMemo
만약 전달해준 프롭이 Object라면 ?
그 안의 값이 저장되는 것이 아니고, 메모리 주소가 저장되기 때문에
부모가 리렌더링 할 때마다 새로운 메모리 주소의 함수가 생겨난다.
즉 이 상태에선 React.memo만으로는 불필요한 리렌더링을 막을 수 없다.
React.memo + useMemo
여기서 그 변수로 빼놓은 오브젝트에 useMemo를 사용하면 리렌더링을 막을 수 있다.
React.memo + useCallback
만약 Prop으로 함수를 넘겨줬다면 ?
자바스크립트에서의 함수는 객체의 한 종류이다.
그렇기 때문에 위의 React.memo + useMemo와 같은 구조로
리렌더링을 막을 수 없게 된다.
그 해결책 역시 비슷한데
그 Prop으로 넘긴 함수에 useCallback(함수 재사용) 를 사용해주면
리렌더링을 막을 수 있다.
앞으로 정리할 훅 - useState , useEffect , useReducer 등
