FGR(Fine Grained Reactivity): 리액트 리렌더링 문제 해결 (ing)

사용하지 않는 프로퍼티를 바꿔도 리렌더링이 일어나지 않는 방법

많은 컴포넌트들이 불필요하게 리렌더링됨에 따라 앱이 버벅거리며 느려지는 현상 발생
→ useMemo, useCallback, React.memo를 써서 최적화할 수 있지만, 근본적인 해결책은 아님
(이러한 방법들은 이전 값과 현재 값을 비교해서 리렌더링을 결정)

또한 다양한 상태 관리 라이브러리를 사용할 수 있음
예를 들어 Redux, Zustand, Jotai, Valtio 등

const name = useStore(state => state.user.name);
const age = useStore(state => state.user.age);

언뜻 보면 user.name만 바뀔 때 해당 컴포넌트만 리렌더링 될 것 같지만
내부적으로는 변경 알림이 모두 발생하고, 단지 항상 값을 비교해서 이전 값과 다른 지 확인하는 작업을 거침

예시로 selector를 사용하면, 실제로 값이 같을 때는 리렌더링이 일어나지 않음
하지만 리렌더링을 하지 않으려고 값 비교를 하면,
리액트의 불변성 원칙에 따라 객체의 일부만 변경해도 전체 객체를 새로 만들어야 함
예를 들어 user.name 하나만 바뀌어도 user 객체 전체가 새로 생성됨
이런 식으로 변경되면 해당 상태를 쓰는 곳은 모두 리렌더링 대상이 됨

애초에 변경하는 순간 “어디가 변경되었는지”를 핀포인트로 알 수 있다면
(즉, “user.name을 바꾸는 순간에 name이 바뀌었으니 name을 사용하는 컴포넌트들만 업데이트 하자”)
값 비교도 필요없고, 불필요한 연산도 필요없고, 정확히 필요한 곳만 업데이트 가능

이런 접근 방식을 Fine Grained Reactivity, 줄여서 FGR이라고 함
기존 방식이 “변경 감지 → 전체 알림 → 개별 필터링”이라면,
FGR은 처음부터 특정 값을 사용하는 곳만 정확히 타겟팅