리액트 컴포넌트와 훅의 관계에 대한 생각

TL;DR;

• 컴포넌트 내부에서 전역 상태가 포함된 훅을 직접 사용하는 것보다 props로 필요한 메서드 또는 상태를 주입받는 것이 더 좋다

이슈

위 그림의 하위 메뉴 같은 작은 컴포넌트가 있을 때,

• e.g. 1-5. 유튜브 영상 편집하기 글씨가 노출되는 컴포넌트

컴포넌트에서 전역 상태와 관련된 값을 다뤄야 하는 상황이었다

전역 상태가 있는 훅을 해당 컴포넌트에서 사용하니 메뉴 개수가 늘어날 수록 처리속도가 느려졌다

원인

전역 상태를 useMemo로 가공해서 처리하던 부분이 메뉴 개수 만큼 많아져서 불필요하게 중복된 연산이 발생되고 있었다

해결

해당 컴포넌트에 필요한 상태와 관련 메서드를 외부에서 주입받도록 변경하였다

고찰

전역 상태와 관련된 훅은 사실 전역 상태를 다루기 때문에 어디에서 사용해도 같은 값을 가지는 것을 보장한다
(메인 스레드가 싱글 스레드 이기 때문에)

하지만 useMemo를 사용하여 가공된 데이터를 사용하는 경우 중복된 연산이 많아질 수 있다

반복문을 돌려서 사용할 컴포넌트에선 전역 상태와 관련 메서드들은 외부에서 주입받는 것이 성능면에서 그리고 데이터 정합성 측면에서도 더 좋다

만약 인터벌 같이 시간과 관련된 연산이 있다면 인터벌 발동 주기가 1초일지라도 자바스크립트 특성상 메인스레드가 하나이기 때문에 시간이 맞지 않는 현상이 발생할 수 있다