성능 최적화

1. React 렌더링 최적화

1. state선언은 해당 state를 사용하는 컴포넌트 중 최상위 컴포넌트에 선언한다.
   1. 사용하지 않는, 상위의 컴포넌트에서 선언하면 불필요한 렌더링이 발생한다.
2. 객체 타입의 state는 최대한 분할하여 선언한다.
3. React.memo를 이용한 컴포넌트 메모이제이션
   1. List > Item이 변경되었을 때 : 새로 변경된 Item만 렌더링하고 기존에 이미 렌더링된 Item은 리렌더링 X
4. map사용할 떄 key값으로 index사용 X
   1. 요소가 중간에 삽입되면 그 중간 이후에 위치한 요소들은 전부 인덱스가 변경 > key갑싱 변경되고 리마운트 > key와 매치가 안되어 서로 꼬이는 부작용
5. useMemo
   1. 종속 변수들이 변하지 않으면 함수를 굳이 다시 호출하지 않고 이전에 반환한 참조값을 재사용
   2. 함수 호출 시간 세이브 & props로 받는 하위 컴포넌트의 리렌더링 방지
6. useCallback
   1. 리렌더링이 일어났을 때 종속 변수들이 변하지 않으면 함수를 재생성하지 않음
7. props로 객체를 넘겨주는 경우 새 객체 생성을 주의

   // 생성자 함수
    <Component prop={new Obj("x")} />
    // 객체 리터럴
    <Component prop={{property: "x"}} />
   1. 위와 같은 방식은 매 번 새로운 객체를 생성하므로 매번 새로운 참조값을 가지게 된다. -> 리렌더링
   2. state를 그대로 하위 컴포넌트에 넘겨주어 필요한 데이터 가공을 그 하위컴포넌트에서 해주는 게 좋음