소개

내 것Timer CodeSandbox을 먼저 확인해 봐.타이머를 돌리고, 샌드박스를 갈라놓고, 코드를 검사하고, 심지어는 재구성하여 더 좋아지게 하세요!
나의 React Hooks 시리즈의 앞의 두 문장은useState와useEffect를 분해했다.이 글은 use Ref를 주목할 것이다. 이것은 내가 가장 좋아하는 갈고리 중의 하나이다.나는 어쨌든 useRef 전문가가 아니라는 것을 인정하고 싶다. 본고는 타이머의 예시와 관련된useRef를 어떻게 실현하는지만 소개한다.

빠른 우회로

타이머 프로그램에서 useRef 연결을 사용해야 하는 이유를 토론해 봅시다.
그것은 PAUSE 단추와 그 행위와 관련이 있다.처음에 useRef를 일시 정지 기능에 연결하지 않았습니다.사용자가 일시 정지를 시도할 때, 통상적으로 지연이 발생하며, 타이머는 여전히 1초를 더 계산한다.
우리는 그 특정한 행위를 보아야 한다. 왜냐하면 우리는 useffect와 setTimeout을 더욱 잘 이해할 수 있기 때문이다.PAUSE과start === true가 완전히 counter와 같지 않을 때, 나는 조건부로 0 버튼을 보여 준다.

{
   start === true && counter !== 0
   ? 
   <button style={{fontSize: "1.5rem"}} onClick={handlePause}>PAUSE</button> 
   : 
   null 
}

타이머가 실행되면 일시 중지 버튼이 렌더링됩니다.

const handlePause = () => {
    setStart(false)
}

보시다시피 handlePause 는 start 을 false 로 설정하여 정지 단추를 사라지게 하고 (null로 렌더링) 그 위치에서 시작 단추를 렌더링합니다.start의 상태가 true에서 false로 바뀌어 우리의 첫 번째 useEffect를 촉발했습니다(잠시 무시 pauseTimer.current.

 useEffect(() => {
      if (start === true) {
        pauseTimer.current = counter > 0 && setTimeout(() => setCounter(counter - 1), 1000)
      }
      return () => {
        clearTimeout(pauseTimer.current)
      }
  }, [start, counter, setCounter])

사용자가 PAUSE 을 눌렀을 때, useEffect는 start === true (현재 더 이상 없음) 을 검사하지만, 이전 렌더링된 setTimeout이 실행 중인지, useEffect가 start 실제와 같지 않을 때까지 true 다른 setTimeout을 실행하지 않습니다.그러나 지연이 발생하는 것은 이전의 setTimeout이 실행을 완성하기 때문이다.그때가 되면 때때로 이미 늦었고, 또 1초가 지났다.
이런 행동을 보고 싶으세요?19 줄에서 Timer CodeSandbox 을 열고 삭제pauseTimer.current =, 타이머를 실행하고 몇 번 멈추려고 시도합니다.타이머가 즉시 멈추지 않았다는 것을 알 수 있습니다.
기왕 우리가 이 문제를 이해했으니, 우리는 그것을 해결할 수 있다.
useRef 갈고리를 입력하여 하루를 저장하세요!

섹션 3 - 사용자 EF

useRef를 이해하는 데는 시간이 좀 걸릴 수 있습니다.나는 이것이 나에게 이롭다는 것을 안다.우선 React docs 무슨 할 말이 있는지 봅시다.

useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.

그래, 뭐라고?
만약 네가 이것이 무엇을 의미하는지 확실하지 않다면, 너는 결코 외롭지 않다.
나는 Lee Warrick가 쓴 이 박문이 매우 도움이 된다는 것을 발견했다. 특히 그가 useRef에 대한 설명:

Refs exist outside of the re-render cycle.
Think of refs as a variable you’re setting to the side. When your component re-runs it happily skips over that ref until you call it somewhere with .current.

그것은 나의 빛나는 순간이다.ref는 상태에 있는 대상에 따라 정의할 수 있는 변수입니다. 상태가 바뀌어도 영향을 받지 않습니다.그것은 당신이 다른 일을 할 때까지 가치를 유지할 것이다.
타이머 응용 프로그램에서 실제 동작을 볼 수 있습니다.
React 가져오기에 useRef 추가:

import React, { useState, useEffect, useRef } from "react";

문서에서 다음을 수행합니다.

const refContainer = useRef(initialValue);

나중에 참조할 객체의 인스턴스를 정의합니다.
우리는 다음과 같이 보인다.

const pauseTimer = useRef(null)

특히 여러 useRefs를 사용할 때 의미 있는 이름을 지어야 합니다.내 것은 pauseTimer 왜냐하면 이것이 내가 그것을 호출할 때 하기를 바라는 것이기 때문이다.null는 내가 useRef()에서의 초기 값이다. 왜냐하면 pauseTimer의 초기 상태는 나의 함수에서 중요하지 않기 때문이다.타이머가 타이머를 재기 시작하면, 우리는 pause Timer의 인용이 무엇인지에만 관심을 갖는다.pauseTimer속성이 있는 객체입니다.useRef가 만든 모든 ref는 속성이 current인 대상이 됩니다.current는 우리가 설정할 수 있는 값이 될 것이다.
useEffect를 다시 한 번 살펴보겠습니다. 지금 특별히 주목합니다pauseTimer.current.여기에서 저희가 설정한 조건(예 pauseTimer.current 이 counter 보다 큽니까?timeout을 0 값으로 설정합니다.이것은 우리가 어디에서나 set Timeout 값에 접근할 수 있도록 합니다!

useEffect(() => {
   if (start === true) {
     pauseTimer.current = counter > 0 && setTimeout(() => 
   setCounter(counter - 1), 1000)
   }
   return () => {
     clearTimeout(pauseTimer.current)
   }
}, [start, counter, setCounter])

여기서부터는 간단합니다.사용자가 nowpauseTimer.current를 선택하면 PAUSE가 start로 업데이트되고 useEffect에서 setTimeout을 실행할 수 없으므로 정리 기능을 실행합니다.

return () => {
     clearTimeout(pauseTimer.current)
}

만약 우리의clear Timeout에 false 이 없다면, 타이머는 1초 동안 계속 시간을 재게 될 것입니다. 이전과 같이, 조건 블록pauseTimer.current의 set Timeout이 모든 과정을 실행할 것입니다. 설령 우리가 1초 전에 if (start === true) 을 start 로 설정한다고 해도.
하지만!clearTimeout에 false (현재 setTimeout 값에 대한 참조) 가 있기 때문에, useEffect는 pauseTimer.current 를 건너뛰고 청소 기능을 즉시 실행하고 setTimeout을 중지합니다!
이게 바로 use Ref의 힘!값에 대한 인용에 접근할 수 있습니다. (부모 대상에서 하위 대상으로 전달할 수도 있습니다!)네가 그것을 알려주지 않으면, 이 인용들은 바뀌지 않을 것이다. (우리의 타이머가 갱신될 때마다 바뀌는 것처럼)

보너스

이것은 단지 use Ref 빙산의 일각일 뿐이다.useRef와 DOM 요소와의 상호작용에 더 익숙할 수 있습니다.
myportfolio website에서 useRef는 애니메이션 내비게이션 화면을 열고 닫는 방법을 표시합니다.
내 구성 요소 기능 사이드바에서:
나는 나의 참고 번호를 정의한다

const navRef = useRef()

탐색을 닫고 열 수 있는 기능 만들기

function openNav() {
    navRef.current.style.width = "100%"
}

function closeNav() {
    navRef.current.style.width = "0%"
}

if (start === true)의 Reactref 속성을 div로 설정합니다.

<div id="mySidenav" className="sidenav" ref={navRef}>

및 클래스 CSS 파일

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background-color: #212121;
  overflow-x: hidden;
  transition: 0.6s;
  padding-top: 5rem;
}

멋있죠?navRef는 DOM 요소sidenav와 상호작용합니다. 속성navRef이 있고 호출div className="sidenav" 시 ref={navRef} 로 업데이트되기 때문입니다.
"closeNav()"를 호출할 때 반대입니다.

끝내다

나는 네가 내 시리즈의 세 번째 부분을 즐겨 읽기를 바란다.만약 네가 이 점을 할 수 있다면, 우선

두 번째

나는 React hooks에서 이 시리즈를 계속할 계획이다.나는 같은 갈고리의 다른 부분을 소개하거나 모든 새로운 갈고리를 탐색할 수 있다.계속 지켜봐 주십시오. 예전과 같이 다시 한 번 감사합니다.이것은 나에게 있어서 의미가 크다. 누구든지 내가 쓴 어떤 것도 읽을 수 있다.
평론, 피드백 또는 정정을 남겨 주십시오.나는 내가 뭔가를 빠뜨렸거나 개념을 잘못 해석했을 수도 있다고 확신한다.만약 당신이 무엇을 보았다면 저에게 알려주세요!내가 이렇게 하는 것은 나 자신을 배우기 위해서이다.
다음까지...
즐거움 코드