React 리렌더링 지옥, FGR로 탈출!
by DD
11개월 전
조회수 11
React의 불필요한 리렌더링 문제를 해결하기 위해 FGR(Fine Grained Reactivity) 개념을 소개함
Legend State 라이브러리를 통해 FGR 구현 원리를 분석하고, use$ 훅 사용법을 설명함
FGR 도입 시 성능 개선 효과를 얻을 수 있지만, 오버헤드 및 보일러플레이트 발생 가능성 존재
FGR의 핵심 원리: 세밀한 반응성
FGR(Fine Grained Reactivity)는 변경된 값만 정확하게 감지하여 불필요한 리렌더링을 방지한다. 구체적으로 get()과 set() 메서드를 통해 이벤트 핸들러를 등록하고 실행한다. 따라서 use$ 훅을 사용하면, 변경된 값에 따라 컴포넌트가 선택적으로 업데이트된다.
Legend State vs 기존 상태 관리 라이브러리
기존 Redux, Zustand 등의 라이브러리는 selector를 사용하지만, 객체 전체를 비교하는 방식이다. 반면 는 FGR을 통해 를 제거하고, 을 향상시킨다. 따라서 와 을 기대할 수 있다.
