성능최적화

1. React.memo

React.memo Reference

컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

export default React.memo(리액트컴포넌트);

2. 불변성을 지키는 이유

• 리액트에서 상태가 변경되었는지 확인할 수 있도록 해줘야 해서
• 불변성이 지켜지지 않으면 객체, 배열등이 변했는지 확인 못함

const array = [1,2,3,4,5]

const array2 = array;

array2.push(6);

console.log('확인',array===array2) // false

const array3 = [...array2]

console.log('확인',array2===array3) //true