리액트에서 스크롤로 opacity 조절할때, ref vs opacity

Question

안녕하세요. 리액트로 스크롤할 때 opacity를 조절하는 기능을 만들고 있습니다.

이 컴포넌트에는 작성자, 이미지 등 다양한 값들이 존재하는데요. 스크롤할 때는 style의 opacity만 변경됩니다.
그렇다보니.. 굳이 리렌더링을 트리거하는 state로 이걸 관리해야되나 싶긴한데요.

이런 상황이라면 다들 어떻게 개발하시나요?

상현 · Answer

제목과 본문에 차이가 있어서 먼저 짚자면, 
ref는 state가 아닙니다.

ref.current에 잡힌 값은 수정할 수 있지만, 그로 인해서 컴포넌트가 리렌더링되지는 않습니다. 이런 이유로 react 안에서 만들어 진 값을 react 바깥 (useEffect 스코프나 useExternalSyncStore 스코프)에서 쓸 목적으로 주로 사용합니다.

다음으로, 리렌더링은 react에서만 일어나진 않습니다. 
웹은 리플로우와 리페인팅 과정에서도 리렌더링이 되고, opacity 값의 변화는 후자에 해당합니다.

말씀하신 다양한 값이 특정 state 객체 - 대표적으로 store - 의 종속값이고 그 객체에 opacity가 들어가 있다면 의존성이 scrollY에만 있는 opacity는 독립시켜 떼어내고 불필요하다면 state에서도 제거할 수 있습니다. 먼저 웹의 관점에서 생각해보고 react를 생각하시는 걸 권해봅니다.