개발자
리액트에서 스크롤로 opacity 조절할때, ref vs opacity
안녕하세요. 리액트로 스크롤할 때 opacity를 조절하는 기능을 만들고 있습니다. 이 컴포넌트에는 작성자, 이미지 등 다양한 값들이 존재하는데요. 스크롤할 때는 style의 opacity만 변경됩니다. 그렇다보니.. 굳이 리렌더링을 트리거하는 state로 이걸 관리해야되나 싶긴한데요. 이런 상황이라면 다들 어떻게 개발하시나요?
답변 1
제목과 본문에 차이가 있어서 먼저 짚자면, ref는 state가 아닙니다. ref.current에 잡힌 값은 수정할 수 있지만, 그로 인해서 컴포넌트가 리렌더링되지는 않습니다. 이런 이유로 react 안에서 만들어 진 값을 react 바깥 (useEffect 스코프나 useExternalSyncStore 스코프)에서 쓸 목적으로 주로 사용합니다. 다음으로, 리렌더링은 react에서만 일어나진 않습니다. 웹은 리플로우와 리페인팅 과정에서도 리렌더링이 되고, opacity 값의 변화는 후자에 해당합니다. 말씀하신 다양한 값이 특정 state 객체 - 대표적으로 store - 의 종속값이고 그 객체에 opacity가 들어가 있다면 의존성이 scrollY에만 있는 opacity는 독립시켜 떼어내고 불필요하다면 state에서도 제거할 수 있습니다. 먼저 웹의 관점에서 생각해보고 react를 생각하시는 걸 권해봅니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 07월 06일
리액트에서 스크롤에 따라서 opacity를 조절하려면, 해당 요소(예: div)의 ref를 이용하거나, state를 이용해 opacity 값을 변경할 수 있습니다. 1. Ref를 이용: - useRef Hook은 리액트 컴포넌트에서 DOM을 직접적으로 조작해야 할 경우 활용되곤합니다. - 스크롤시 해당 요소의 style의 opacity 값을 조정하도록 구현 - 하지만, 요소의 실제 DOM을 직접 수정하는 것이므로 리액트의 '선언형 프로그래밍' 패러다임을 위반한 것이라고 볼 수 있습니다. 2. State를 이용: - useState Hook을 사용하여 opacity 값을 저장하는 state를 만들 수 있습니다. - 그 다음, scroll event listener에서 스크롤 위치에 따라 해당 state를 업데이트 시키는 방식 - 이 경우 불필요한 re-render 가능성이 있으나, React가 intelligent diffing algorithm (Virtual DOM)을 통해 실제로는 필요한 부분만 재렌더링하기 때문에 큰 성능 문제는 없습니다. 개인적으로 추천드리는 방법은 State를 사용하는 것입니다. 왜냐하면 Refs는 주로 다음과 같은 사항들을 처리하기 위해 사용됩니다: 특정 input 요소에 포커스 주기, 특정 scroll 위치로 이동하기, 미디어 요소(play, pause, etc.) 조작 등. 따라서 opacity 값을 변경하는 것은 정확히 말해서는 DOM을 '조작'하는 것이 아니므로 state를 사용하여 처리하는 편이 좋겠습니다. 이런 방식은 선언적 스타일의 React 프로그래밍 패러다임에 더 부합하며 리렌더링 문제도 적절히 관리할 수 있습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!