useRef

 

useRef 

 

• Dom을 선택하는 용도로 사용
• 컴포넌트 안에서 조회 및 수정할 수 있는 변수 관리

오늘은 usRef의 첫번째 특징 Dom선택용도에 대해 공부해보려한다.

렛츠고!

 

이전에 돔 시간에서

자바스크립트의 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택했다.

리액트에서도 가끔 돔을 직접 선택해야하는 상황이 있다고한다

이럴때 사용하는게 useRef Hook함수

 

useRef로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조한다

주소값은 컴포넌트가 re-render 되더라도 바뀌지 않는다.

 

 

조금 쉬운 코드를 만들어서 이해해보자 

import logo from './logo.svg';
import {useRef, useref} from 'react'


function App() {
  const myRef = useRef(null)

  return (
    <div>
    <button onClick = {()=> myRef.current.style.backgroundColor = 'pink'}>
      색변경
    </button>
    <div ref={myRef}>userRef 공부해보자</div> 
    </div>
  
    
  );
}

export default App;

작동원리 ? 콘솔로그

 

import logo from './logo.svg';
import {useRef, useref} from 'react'


function App() {
  const myRef = useRef(null)

  return (
    <div>
    <button onClick = {()=> {
      console.log(myRef); //콘솔로그를 집어넣어줌
      console.log(myRef.current) // myRef.current도 확인해보자
      myRef.current.style.backgroundColor = 'pink'}
      }>
      색변경
    </button>
    <div ref={myRef}>userRef 공부해보자</div> 
    </div>
  
    
  );
}

useRef를 사용하면 객체가 하나 뿅! 튀어나오는데

key값으로는 current를 가지고있다.

 

그렇다면 myRef.current를 찍어보니 myRef를 포함하고있는 <div></div>가 튀어나오면서 그값을 참고하여 버튼을 누를시에 

backgroundColor가 핑크로 변하는것이 보인다. 

 

 

이제 좀더 심화하여 알아보자

import {createRef, useRef, useState} from 'react'


function App() {
  const myRef = useRef(null)
  
  const [list,setList] = useState([
    {id :1 , name : '채영'},
    {id :2 , name : '민우'}
  ])
  const myRefs = Array.from({length:list.length}).map(()=>createRef());
  //myref가 배열로 만들어진다.

  return (
    <div>
    <button onClick = {()=> {
      console.log(myRef);
      console.log(myRef.current)
      myRef.current.style.backgroundColor = 'pink'
      myRefs[0].current.style.backgroundColor = 'powderblue'
    }
      }>
      색변경
    </button>
    <div ref={myRef}>userRef 공부해보자</div> 
    {list.map((user , index)=> (
        <h1 ref={myRefs[index]}>{user.name}</h1>))}
    </div>
  
    
  );
}

export default App;

 

 

 

 

 

---

 

학습 과정에서 나온 코드 예시

Action Item 1 : focus

타자연습을 하는 코드를 예시로 보여줬다.

 

import React, { useRef } from "react";

const Focus = () => {
  const firstRef = useRef(null);
  const secondRef = useRef(null);
  const thirdRef = useRef(null);

  const handleInput = (event) => {
    console.log(event.key, event);
    if (event.key === "Enter") {
      if (event.target === firstRef.current) {
        secondRef.current.focus();
        event.target.value = "";
      } else if (event.target === secondRef.current) {
        thirdRef.current.focus();
        event.target.value = "";
      } else if (event.target === thirdRef.current) {
        firstRef.current.focus();
        event.target.value = "";
      } else {
        return;
      }
    }
  };

  return (
    <div>
      <h1>타자연습</h1>
      <h3>각 단어를 바르게 입력하고 엔터를 누르세요.</h3>
      <div>
        <label>hello </label>
        <input ref={firstRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>world </label>
        <input ref={secondRef} onKeyUp={handleInput} />
      </div>
      <div>
        <label>codestates </label>
        <input ref={thirdRef} onKeyUp={handleInput} />
      </div>
    </div>
  );
};

export default Focus;

코드를 읽을때 우선은 화면과 비교하는 연습을 해야겠다.

1. 리턴부분을 보며 어디가 어딘지를 비교하기 -> ok

2. 이해가 안됬던것을 찾아보기 -> event.key와 event.target을 좀 찾아봤다.

(e => event.target.value는 자주했었는데 event.target만 나오니 음?? 생소하네 싶었다. 역시 대충알고 넘어가며안된다. 개념도 확실히하자)

 

•  target 속성은 event가 전달한 객체에 대한 참조
• event target의 value부분을 보는것이아니다. 그 타겟이 firstRef.current랑 같을때!

 

 

3. 코드보는것을 자꾸 두려워하지말고 천천히 시간을 들여서라도 한줄한줄 해석해봐야한다.

 

위에서 공부했던것과깉이 useRef를 변수에담아주면 객체가 튀어나올것이다 => 대략 {current : input}

if (event.target === firstRef.current) 이 코드가 그러면 키로 엔터를 눌렀고, 이벤트의 타겟이 첫번째인풋박스면 {뒤에 함수를 실행}한다

 

이렇게 해석이된다.

 

4. firstRef.current.focus() <= 이부분이 돔 선택을 한 부분이다 포커스 예시. 돔조작 -> useRef를 사용해서 포커스를 조정한다

 

Action Item 2 : media playback

import { useRef } from "react";

export default function App() {
  const videoRef = useRef(null);

  const playVideo = () => {
    videoRef.current.play();
    console.log(videoRef.current);
  };

  const pauseVideo = () => {
    videoRef.current.pause();
    videoRef.current.remove();
  };

  return (
    <div className="App">
      <div>
        <button onClick={playVideo}>Play</button>
        <button onClick={pauseVideo}>Pause</button>
      </div>
      <video ref={videoRef} width="320" height="240" controls>
        <source
          type="video/mp4"
          src="https://player.vimeo.com/external/544643152.sd.mp4?s=7dbf132a4774254dde51f4f9baabbd92f6941282&profile_id=165"
        />
      </video>
    </div>
  );
}

 

코드를 읽어보자.

 

1. <video> 삽입요소를 통하여 src값을 넣고 비디오를 삽입해줬다.

2. 그안에 useRef 변수를 담아주었다. console.log(videoRef) 를 하면 -> 객체가 튀어나올것이다 {current : video}
videoRef.current <- <video>가되고 이제 이부분을 조작할수있다.

 

3. 버튼을 온클릭하면 해당 버튼에 해당하는것 playVideo/pauseVideo가 실행된다.

4. playvideo함수는 비디오가 실행되게 해주는 함수

5. pausevideo함수는  중단한 후 없애버리는 함수

(다시 playvideo를 눌러봐도 비디오가 remove되어버려서 실행이 불가능했다.)

 

---

역시 차근차근 공부해야된다! 처음에는 뭔소리야 했지만

차근히 코드를 읽고 콘솔로그를 쳐보니 이해가됐다.

알아가는것에서 행복을 느껴보자 ! 매일매일 지식을 쌓고 똑똑...(?) 해진다..음..어제보다는 똑똑해지는게맞지 ㅋㅋㅋㅋ

아무튼 발전한다는것에 의의를두자.

나는 칭찬에 약하니 매일매일 내자신을 독려해주자 ! 오늘도 수고했다