React+typescript+next.js로 만든 프로젝트 이후,
react 성능 최적화에 대해 공부하면 좋을 것 같아 남기는 글!

1. 큰 컴포넌트를 작은 컴포넌트로 분해

캡슐화 될 수 있는 코드 블록을 찾는다!
특히 테이블 작성의 경우 TableHeader, TableRows등을 컴포넌트로 분리하면 좋다
-> 테이블을 더 작고 추론하기 쉽게 만들 수 있음

2. useMemo

useMemo: react에서 cpu 소모가 심한 함수들을 캐싱하기 위해 사용됨.
리렌더링을 막기 위한 도구라기 보다는 성능 개선의 도구라고 생각하면 좋음
하나의 함수가 호출되고 값을 리턴할 때 시간이 오래걸리면 -> 이 컴포넌트가 리렌더링 될 때 마다 함수 호출 시 많은 시간 소요 -> 자식 컴포넌트도 있다면 자식 컴포넌트도 함수의 리턴값을 받기 위해 시간이 오래걸림

useMemo(()=> func, [input_dependency])

: useMemo는 종속 변수들이 변하지 않으면 굳이 함수를 다시 호출하지 않고, 이전에 반환한 참조값을 재사용 한다.

*리렌더링 되는 경우

• state 변경 시
• 부모 컴포넌트 렌더링 시
• 새로운 props 들어올 시 (자신이 전달받은 props가 변경될 때)

3. useCallback

useCallback: useMemo가 함수의 리턴되는 값을 메모이제이션한다면, useCallback은 함수 선언을 메모이제이션 함

4. index 사용 줄이기

: map 메소드를 사용할 때 key 값에 index를 넣곤 하는데, 좋지 않은 방법임!
-> 어떤 배열 중간에 어떤 요소가 삽입될 때, 중간 이후 위치한 요소들은 전부 index가 변경됨

그렇다고 무조건 사용하면 안 된다는 것은 아님!

• id로 쓸 만한 unique값이 없을 경우
• 배열에 수정, 삭제, 추가 기능이 없는 단순 렌더링만 담당하는 경우

5. input에 onChange 최적화

: input 태그에 onChange 이벤트를 줄 때, 타이핑을 할 때마다 해당 컴포넌트가 렌더링됨
-> 실제로 console.log()를 찍어보면, 한 글자 한 글자 입력할 때 마다 console이 찍히게 됨
=> setTimeout을 통해 개선할 수 있는데 사실 난 .. 엄청 좋은 방법인지는 잘 모르겠음 ..!

이외에도 더 다양한 방법들이 있지만, 가장 대표적이고 쉬운 방법이라고 생각해서 정리해두었다. 사실 가장 쉽고 간편하며 중요한 건 처음 코드 짤 때부터 컴포넌트 분리를 잘 하는것이 중요하다고 생각한다 ..!