React 시리즈: useState 대 useRef-JS 튜토리얼-php.cn

처음 시작하는 경우 useState와 그 모든 특징이 너무 압도적일 수 있습니다. 이제 useRef를 믹스에 넣으면 엄청난 두뇌 폭발이 일어납니다.

React Series: useState vs useRef

useRef와 useState의 기술을 좀 더 자세히 알아보는 것이 도움이 될 것이라고 생각했습니다. 엔지니어는 일반적으로 둘 사이의 차이점과 둘 중 하나를 선택해야 하는 시기를 이해하는 데 어려움을 겪기 때문입니다.

각각에 대한 정의는 광범위하고 지나치게 단순화되어 있습니다.

useState는 값에 액세스하고 업데이트하여 다시 렌더링을 트리거할 수 있는 후크입니다.

useRef는 렌더링에 필요하지 않은 값을 참조
할 수 있는 후크입니다.

각각의 결과가 무엇인지 이해하는 것이 왜 궁금하실 수도 있습니다. 음, 단순히 작동한다는 이유만으로 useState를 모든 것에 적용하고 싶은 유혹을 느낄 수도 있습니다.

예, 그러나 상태 소품을 5레벨 아래로 전달하는 구성 요소로 인해 앱이 더 복잡해지고 그 과정에서 불필요한 업데이트가 많이 발생할수록 더 빨리 성능 문제가 발생하기 시작할 것입니다. 당신이 상상하는 것보다.

많은 개발자가 갖고 있는 또 다른 오해는 useRef가 DOM 요소만 조작하고 액세스할 수 있다고 생각하는 것인데, 이는 useRef가 할 수 있는 다른 99가지 작업을 모두 놓치고 있기 때문에 슬픈 일입니다.

useState부터 시작해 보겠습니다! 이제 귀를 열어주세요, 사랑하는 개발자 ʕ◉ᴥ◉ʔ

✨ useState

useState는 변수 값이 변경되면 뷰를 업데이트하는 강력하면서도 쉬운 방법이며, 수동으로 작업을 수행하지 않고도 최신 값을 화면과 동기화된 상태로 유지합니다. 선언 구문은 다음과 같습니다. const [memesILiked, setMemesILiked] = useState(9000).

이제 useState를 사용하여 작업을 수행할 때 내부적으로 어떤 일이 발생하는지 이야기해 보겠습니다.

상태 값을 업데이트하면 다시 렌더링이 발생하며, 여러분이 상상할 수 있듯이 뷰를 다시 렌더링하는 것은 브라우저에서 처리하기에는 아주 비용이 많이 드는 작업입니다. 앱이 업데이트되었는지 확인하기 위해 React와 브라우저가 함께 작동하는 방법은 다음과 같습니다.

이벤트 트리거: 이벤트가 상태 업데이트를 트리거합니다. 클릭, 타이머 또는 실제로는 무엇이든 가능합니다.
상태 업데이트: setState가 호출되고 구성 요소에 대한 업데이트를 예약하면 구성 요소가 "더티"(다시 렌더링 필요)로 표시됩니다.
조정 단계: React는 새로운 가상 DOM과 이전 가상 DOM 간의 조정을 시작합니다. 구성 요소와 모든 하위 항목을 반복적으로 다시 렌더링합니다.
차이점 확인: React는 새로운 가상 DOM 트리를 이전 것과 비교합니다. 변경 사항은 실제 DOM에 적용할 업데이트 목록에 저장됩니다.
렌더링 단계: 렌더링 메서드 또는 함수 구성 요소가 새로운 상태로 호출됩니다.
커밋 단계: React는 diffing 프로세스의 변경 사항을 실제 DOM에 적용합니다.
DOM 업데이트: 실제 DOM은 새로운 상태를 반영하도록 업데이트됩니다. 브라우저는 DOM을 다시 그려 UI를 시각적으로 업데이트합니다.
렌더링 후 효과: 구성 요소가 다시 렌더링된 후 실행되도록 예약된 모든 효과가 호출됩니다. 여기에는 렌더링 중에 변경된 종속성과 함께 등록된 useEffect 후크가 포함됩니다.

휴, 정말 많은 일이군요... 위 프로세스를 통해 UI가 애플리케이션 상태와 동기화되도록 보장하는 동시에 과도하거나 불필요한 재렌더링이 성능 문제로 이어질 수 있는 이유도 강조합니다. . 다행스럽게도 React는 이 프로세스를 최적화하는 데 도움이 되는 useMemo 및 useCallback과 같은 여러 전략과 도구를 제공하지만 이는 이 기사의 범위를 벗어납니다!

요약하자면, useState는 매우 편리한 후크이며 올바르게 사용하면 사용자에게 훌륭한 경험을 제공할 수 있습니다. 예를 들어 테마 전환을 생각해 보세요. useState를 사용하면 밝은 모드와 어두운 모드 사이를 쉽게 전환할 수 있으므로 사용자는 자신의 선호도에 따라 앱이 변환되는 것을 즉시 확인할 수 있습니다.

✨ Ref 사용

이제 useRef에 대해 이야기해 보겠습니다. useState는 상태가 변경될 때 다시 렌더링을 트리거하는 반면, useRef는 자신에게 주의를 끌고 싶지 않은 조용한 관찰자와 같습니다. 변경 시 다시 렌더링할 필요가 없는 변경 가능한 값을 저장하는 데 적합합니다. 구문은 const memeRef = useRef(null)과 같습니다.

useRef는 DOM 요소에 직접 액세스하는 데 가장 자주 사용됩니다. 예를 들어 프로그래밍 방식으로 입력 필드에 초점을 맞춰야 하는 경우 useRef는 해당 요소에 대한 참조를 보유할 수 있습니다. 그러나 useRef의 기능은 단순한 DOM 액세스 이상의 기능을 제공합니다. 또한 변경 가능한 어떤 값도 저장할 수 있습니다! 그리고 여기가 바로 마법이 일어나는 곳입니다 ??? (어차피 제 생각엔).

이렇게 생각해 보세요. useRef는 다시 렌더링을 트리거하지 않고 렌더링 전반에 걸쳐 값을 유지하는 방법입니다. 이는 타이머, 카운터 또는 구성 요소의 이전 상태와 같은 데이터를 저장하는 데 적합합니다. useState와 달리 ref를 업데이트해도 React에 구성 요소를 다시 렌더링하라고 알리지 않습니다. 그저 조용히 가치를 업데이트하며 사업을 이어갈 뿐입니다.

다음은 실제적인 예입니다. 간단한 카운터를 구현하고 싶지만 카운터를 증가시킬 때마다 UI가 업데이트되는 것을 원하지 않는다고 가정해 보겠습니다. useRef를 사용하여 카운터 값을 저장할 수 있습니다. 카운터는 예상대로 증가하지만 구성 요소가 렌더링 목적으로 이 참조 값을 고려하지 않기 때문에 다시 렌더링이 발생하지 않습니다.

useRef는 추가 렌더링을 발생시키지 않고도 상태의 최신 값을 보존하는 데에도 탁월합니다. 예를 들어 간격을 사용하여 값을 업데이트하지만 해당 값이 밀리초마다 다시 렌더링되도록 하지 않으려면 useRef가 가장 적합한 도구입니다. 백그라운드에서 값을 변경하여 UI의 반응성을 유지하고 불필요한 재렌더링을 방지할 수 있습니다.

요약하자면, useRef는 다음 용도로 가장 적합합니다.

DOM 요소 액세스: 입력 필드에 초점을 맞추는 것과 같은 고전적인 사용 사례.
변경 가능한 값 저장: 타이머나 이전 값과 같은 다시 렌더링이 필요하지 않습니다.
렌더링 전반에 걸쳐 값 유지: 다시 렌더링하지 않고 UI를 부드럽고 효율적으로 유지합니다.

이제 차이점을 바라건대 이해하셨으니(내 의무를 올바르게 수행했다면²) 흔하지 않은 몇 가지 사용 사례를 살펴보겠습니다. 여기서는 알려지지 않은 영웅인 것 같아서 useRef에 좀 더 집중하겠습니다.

구성요소 마운트 상태 추적: useRef를 사용하여 구성요소가 마운트 또는 마운트 해제되었는지 추적할 수 있으며, 마운트 해제 후 상태 업데이트를 방지하는 데 유용할 수 있습니다.
정적 값 보유: 상수 또는 캐시된 값과 같이 렌더링 간에 변경되지 않는 정적 값을 저장하는 경우 useRef가 useState보다 더 효율적입니다.
재초기화 방지: 코드 조각이 모든 렌더링을 다시 실행하는 것을 방지하려는 경우(예: WebSocket 연결 초기화).
이전 콜백 저장: 이전 콜백 함수에 대한 참조를 유지해야 하는 경우 useRef는 구성 요소의 렌더링 주기에 영향을 주지 않고 이전 함수 참조를 저장할 수 있습니다.
타이머 ID 참조: 타이머(예: setTimeout 또는 setInterval)로 작업할 때 타이머 ID를 useRef에 저장하여 타이머가 설정되거나 지워질 때마다 다시 렌더링이 실행되는 것을 방지하세요.
애니메이션 트리거: 명령적으로 애니메이션을 트리거하는 경우(예: CSS 전환 또는 스크롤 애니메이션) useRef를 사용하면 다시 렌더링하지 않고 DOM 요소와 직접 상호작용할 수 있습니다.