일반적인 리액트 라이브러리 아키텍처
🔗아래 블로그 글에 대한 리뷰 글입니다.
글에 대한 상세한 내용은 작성하지 않으니 내용은 아래 링크를 통해 확인하시길 바랍니다.
https://imnotadevleoper.tistory.com/357?utm_source=substack&utm_medium=email
요약
바인딩과 외부 연결 부분으로 나누어 볼 수 있으며 외부 연결은 useSyncExternalStore와 커스텀훅을 사용하는 방식이 있다.
리뷰
이 글에서는 일반적인 리액트 라이브러리들이 선택한 구조에 대한 내용이 담겨있다.
바인딩은 리렌더링 사이클에서 벗어난 코어 객체를 React와 연결시키기 위한 부분이다.
일반적으로 Context API를 사용하며 Provider 내에서 쉽게 데이터을 가져오고 리렌더링 사이클에서 분리하여 관리할 수 있다.
외부 연결은 바인딩된 무언가의 변경을 감지하고 리렌더링이 필요한 상황에 대한 정의이다.
useSyncExternalStore 또는 useEffect, useReducer 등을 사용하여 자신만의 커스텀훅을 만드는 방법을 사용한다.
useSyncExternalStore를 사용할 때는 주의할 점이 있다고 하는데 정확하게 이해하지 못했다.
최근 업무에서 라이브러리 형태의 툴을 만드는 일이 있었는데 무작정 커스텀 훅으로 만들었다가 리렌더링 파티가 일어난 적이 있다. 수정을 위해서 조금 찾아보았지만 useSyncExternalStore에 대한 이해가 부족해서 일단 급하게 zustand로 리렌더링을 최소화했다. 좋은 방법이 아니라는 것은 스스로도 느껴 시험기간이 끝나면 공부해서 개선하려고 했는데 이 글이 딱 나와서 다행이다. context에 useSyncExternalStore를 사용하는 구조가 일반적인지 확신이 들지않았는데 이 글을 통해서 확신을 얻었고 훅에 대해서 더 공부해야겠다는 생각이 들었다. 스스로 공부하고 useSyuncExternalStore와 테어링에 대한 글도 작성해야겠다.