React - useRef() 그리고 useEffect의 ComponentWillUnmount

useRef : Component의 어떤 부분을 선택 할 수 있는 방법.  document.getElementByID()를 사용한 것 과 같은 효과

 

사용법 + 간단한 예제

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

const App = () => {
  const input = useRef();
  useEffect(() => {
    setTimeout(() => {
      input.current.focus();
    }, 5000);
  }, []);
  return (
    <div className="App">
      <div>Hi</div>
      <input ref={input} placeholder="la" />
    </div>
  );
};

export default App;

const 변수이름 = useRef();

.

.

.

<태그 ref={변수이름} />

 

이런식으로 사용한다. document.getElementByID() 와 같은 역할을 한다고 생각하면 편하다.

위 코드는 useEffect 와 setTimeout를 이용하여, mount 되면 5초 뒤에 input창이 focus 되게하는 코드이다.

 

예제 2

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

const useClick = (onClick) => {
  const element = useRef();
  useEffect(() => {
    if (element.current) {
      element.current.addEventListener("click", onClick);
    }
    return () => { // ComponentWillUnMount
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []);
  return element;
};

const App = () => {
  const sayHello = () => console.log("Hello");
  const title = useClick(sayHello);
  return (
    <div className="App">
      <h1 ref={title}>Hi</h1>
    </div>
  );
};

export default App;

위와 같은 방법으로, 이벤트 리스너 등록도 가능!

 

* useEffect에 함수를 넣으면 라이프 사이클이 ComponentDidMount / ComponentDidUpdate 일 때 호출 된다. (dependency가 존재하지 않을 경우임! 만약 dependency가 존재한다면 기본적으로는 ComponentDidMount 일 때만 호출됨!)

 

* 라이프 사이클이 ComponentWillUnMount 일 때 return, 만약 함수를 return 한다면 useEffect를 return 받은 그 함수는 라이프 사이클이 ComponentWillUnMount 일 떄 실행됨.

 

useEffect 정리 : 

useEffect(() => {
    if (element.current) { // ComponentDidMount / (ComponentDidUpdate) 일 때 호출될 부분
      element.current.addEventListener("click", onClick);
    }
    return () => { // 라이프 사이클이 ComponentWillUnMount 일 때 호출될 부분
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []); 
  // dependency가 빈 배열로 존재함. 
  //이게 의미하는것은 여기서의 useEffect는 ComponentDidUpdate 사이클이 와도, 안에 있는 함수 실행을 안한다는 의미 => 처음 마운트됬을때 한번만 실행

위에서 빈 배열로 dependency를 준 이유는, 만약 dependency가 없으면, 코드 안에서 변화가 일어날 때마다 이벤트 리스너가 추가될것이다. (코드 내에 useState로 인해 값이 변한다던지 할 때)

 

상당히 어렵게 느껴지는 내용이다 ㅠㅠㅠ 자주 접하다보면 익숙해지겠지..