useRef

useRef는 저장공간(변수), DOM요소에 접근하기 위해 사용되는 React Hooks 중 하나이다. useRef에서의 Ref는 참조(reference)를 뜻한다.

useRef의 사용 이점

React에서 우리는 주로 useState를 이용해 변수를 선언하고 사용한다. useState의 경우 상태(State)가 변할때 마다 리렌더링이 실행되고 해당 컴포넌트 변수들이 모두 초기화가 된다. 컴포넌트 내부의 함수 변수들이 새로 생겨나고 다시 실행되는 것이다.
하지만 useRef의 경우 순수 자바스크립트 객체를 생성해 내기 때문에 렌더링을 해도 초기화 되지 않은 동일한 객체를 제공한다. 따라서 재렌더링 시 초기화되면 안되는 값을 다룰 때 유용하게 쓰일 수 있다.

useState의 경우 상태를 바꾸는 함수가 끝난 후에 바뀐 상태값을 조회할 수 있다. 하지만 useRef의 경우 바로 조회가 가능하다.

useRef의 사용 focus

화면이 보여지면 비밀번호를 입력하는 input을 클릭하지 않아도 자동적으로 포커스가 되어있게 해준다.

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

export default function useRefFocusPage() {
  const inputPasswordFocus = useRef<HTMLInputElement>(null);
  const [password, setPassword] = useState("");

  const onChangePassword = (event: any) => {
    setPassword(event.target.value);
  };

  useEffect(() => {
    inputPasswordFocus.current?.focus();
  });

  return (
    <>
      비밀번호 입력 :{" "}
      <input
        onChange={onChangePassword}
        ref={inputPasswordFocus}
        type="password"
      ></input>
    </>
  );
}

useEffect

useEffect는 함수형 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. useEffect의 사용으로 클래스형에서 사용하던 생명주기 메서드를 함수형 컴포넌트에서도 사용할 수 있게 된 것이다.

useEffect의 형태

import { useEffect } from 'react';

useEffect(() => {
	//코드
    return () => {
    	cleanup 함수
     } 
 }, deps)

자세한 useEffect의 사용은 컴포넌트 생명주기 참고.

생명주기 메서드 참고 주소
https://velog.io/@ryh0629/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B0