React.memo를 사용하면 Props가 바뀌었을때만 리렌더링 해줌
렌더링된 결과물을 재사용할 수 있음
export default React.memo(function이름);이렇게 선언만 해주면 됨
만약 하나의 파일에 두 가지 함수가 들어가고 둘다 렌더링에 사용될 경우,
파일명과 겹치지 않는 함수에
const X = React.memo(function Y(~~){});처럼 const를 사용해 변수를 생성하고, React.memo안에 기존의 함수를 적어줌
이를 적용하기 위해서는, useCallback이나 useMemo같은게 함수들에 적용이 되있어야 함
예를 들어, onChange같이 지속적으로 동작에 따라 호출되는 함수와 같은 페이지에 렌더링 되는 onToggle, onRemove같은 함수들은 useCallback을 하지 않으면, React.memo를 쓴다 할지라도 홈페이지가 자꾸 리렌더링 됨
추가적으로 유저 리스트에서 삭제 버튼을 누르면 해당 유저만 없어지도록 해야 하는데, 모든 컴포넌트들이 렌더링 되는 경우가 있음. 이 경우는, onRemove 호출시, User에 대한 정보가 변경되기 때문
const onRemove = useCallback(id => {
console.log("onRemove");
setUsers(users.filter(user => user.id !== id));
}, [users]);그런데 이는 매우 비효율적임 데이터가 1000000개가 있다고 가정할 때, 데이터 한 개를 지우기위해 999999개를 리렌더링 한다면 굉장히 자원의 낭비가 있을 것임
이를 방지하려면 useState의 함수형 업데이트를 사용해야 함
const onRemove = useCallback(id => {
console.log("onRemove");
setUsers(users => users.filter(user => user.id !== id));
}, []);이렇게하면 setUsers를 통해 users가 업데이트 되도, 리렌더링이 발생하지 않음
useMemo : 연산된 값을 재사용
useCallback : 이벤트 핸들러 함수를 재사용
React.memo : 렌더링된 컴포넌트를 재사용
셋 다 모든 값, 함수, 컴포넌트에 적용하는게 아니라, 유용해보일때만 씀 -> 항상 최적화를 제공하진 않음
