1. jsonplaceholder.typicode.com/posts에서 post 더미 데이터를 받아와 아래와 같은 화면을 만든다.
2. 화면 구성은 똑같이 구성하되 A 컴포넌트는
한번에 작성,
B 컴포넌트는
이렇게 컴포넌트 단위로 쪼개서 작성하였다.
크롬 확장팩인 React Dev Tools의 Profiler기능을 이용하여 같은 내용 다른 코드의 두 컴포넌트가 어떤 성능 차이를 보이는지 비교해보았다. 인풋창에 hello를 적어보았다.
1번째 h를 타이핑해서 re rendering이 발생했을때
App 컴포넌트는 3ms,
A 컴포넌트는 0.6ms,
B 컴포넌트는 2.2ms로
A 컴포넌트 렌더링 타임 < B 컴포넌트 렌더링 타임 이라는 결과가 나왔다.
아무래도 리렌더가 발생할때마다 B컴포넌트에서 불러와야 될 요소가 많아서 그런 것 같았다.
컴포넌트 단위의 개발이 흐름 파악이라던가 여러 장점들이 있지만 성능이 떨어질 수 있다는게 아쉬운 부분이었다.
하지만 이는 React.memo와 useCallback 등을 이용하여 성능 최적화를 진행할 수 있다.
