[React] useRef (2023.05.24)

 

useRef

 

🎈 useRef 예제

 작게 버튼을 클릭하면 사각형의 크기가 작게, 원본 버튼을 클릭하면 원본 크기로, 크게 버튼을 클릭하면 사각형의 크기가 크게 변하게 만들기

 

 

📖 자바스크립트

자바스크립트에서는 이 문제를 풀기위해 사각형 요소에 접근하기 위해서 document에 접근해야 했음

 

사각형 요소 :

<div id = "box"></div>

 

자바스크립트로 id가 box인 요소에 접근하기 :

document.getElementById('box").style.width= 100px

 

📖 리액트에서 변경시키려면?

DOM으로 마찬가지로 접근해야함

useRef 사용

 

usdRef : 특정 DOM 요소에 접근하고 싶을 때 사용   
- 바닐라JS에서는 getElementById, querySelector 등을 사용하여 특정 DOM 요소에 접근하였음   
- React를 사용할 때 특정 DOM 요소에 직접 접근해야 하는 일이 발생할 수 있음       
    ex. 포커싱 작업, 속성 변경 등     
    >> useRef라는 react Hook을 사용

 

⚙️ useRef 사용하기

상위에 useRef 정의

const useRefName = useRef();

 

DOM에 접근하고자 하는 요소(태그)에 ref = {useRef명} 속성으로 추가

<div id="box" ref={useRefName}>

 

DOM에 접근하여 속성 바꾸기

=> useRef명.current...

ex. input 태그의 입력값에 접근하는 방법 : useRefName.current.value

      img 태그의 경로 접근하는 방법 : useRefName.current.src

useRefName.current.style.width = "100px"

 

import React, { useRef } from "react";
import Ex05ButtonList from "./components/Ex05ButtonList";

const Ex05 = () => {
  /* usdRef : 특정 DOM 요소에 접근하고 싶을 때 사용
    - 바닐라JS에서는 getElementById, querySelector 등을 사용하여 특정 DOM 요소에 접근하였음
    - React를 사용할 때 특정 DOM 요소에 직접 접근해야 하는 일이 발생할 수 있음
        ex. 포커싱 작업, 속성 변경 등
      >> useRef라는 react Hook을 사용할 것
    */

  //divRef라는 이름으로 DOM 요소를 가져온 것
  const divRef = useRef();

  const changeSize = (size) => {
    /** div의 사이즈를 조절하는 코드 */
    divRef.current.style.width = `${size}px`;
    divRef.current.style.height = `${size}px`;
  };

  const chBox = (e) => {
    console.log("change Box Fuction", e.target.innerText);
    // console.log("divRef : ", divRef.current.style.width);

    if (e.target.innerText == "작게") {
      changeSize(100);
    } else if (e.target.innerText == "원본") {
      changeSize(159);
    } else {
      changeSize(200);
    }
  };

  return (
    <div>
      <Ex05ButtonList chBox={chBox} />
      <div
        ref={divRef}
        style={{ backgroundColor: "skyblue", width: "150px", height: "150px" }}
      ></div>
    </div>
  );
};

export default Ex05;

 

 

🎈 useRef 실습 1

변경 버튼을 클릭하면 학습자료 pdf 파일 1에서 2로 변경하기

useRef를 이용해서 pdf1 뷰어를 pdf2가 보이도록 할 것

단, state 사용 금지

 

 

'/pdf/pdf1.pdf'

>> "http://localhost:3000/pdf/pdf1.pdf"

 

import React, { useRef } from "react";

const Ex06 = () => {
  const iframeRef = useRef();

  let pdfStyle = {
    // 나를 감싸고 있는 부모를 기준으로 100% (div - 가로한줄)
    width: "100%",
    height: "90%",
  };

  const chPdf = () => {
    console.log("chPdf", iframeRef.current.src);
    iframeRef.current.src == "http://localhost:3000/pdf/pdf1.pdf"
      ? (iframeRef.current.src = "http://localhost:3000/pdf/pdf2.pdf")
      : (iframeRef.current.src = "http://localhost:3000/pdf/pdf1.pdf");
  };

  return (
    // vh : 내 눈에 보이는 기준
    <div style={{ height: "100vh" }}>
      <h3>
        오늘의 학습자료
        <button onClick={chPdf}>변경</button>
      </h3>
      <iframe ref={iframeRef} style={pdfStyle} src="/pdf/pdf1.pdf"></iframe>
    </div>
  );
};

export default Ex06;

 

🎈 useRef 실습 2

한소희를 입력하고 변경 클릭하면 사진 변경 후 input 태그에 포커싱

 

 

import React, { useRef } from "react";

const Ex07 = () => {
  /**
     1) 사용자가 input 태그 안에 입력한 값을 가져오기
     2) 그 값에 따라서 사진의 src 속성을 변경하기
     */

  const inputRef = useRef();
  const imgRef = useRef();

  const chPic = () => {
    if (inputRef.current.value == "한소희") {
      imgRef.current.src =
        "https://file.mk.co.kr/meet/neds/2021/10/image_readtop_2021_1006877_16351128614821782.jpg";
    } else {
      imgRef.current.src =
        "https://cdn.hankooki.com/news/photo/202301/47163_63325_1673949170.jpg";
    }
    inputRef.current.value = "";
    inputRef.current.focus();
  };

  return (
    <div>
      <p>희망하는 사진이 있으신가요?</p>
      <input ref={inputRef} type="text" />
      <button onClick={chPic}>변경!</button>

      <div>
        <img
          ref={imgRef}
          src="https://cdn.hankooki.com/news/photo/202301/47163_63325_1673949170.jpg"
          width="300px"
        ></img>
      </div>
    </div>
  );
};

export default Ex07;