[React] Hook함수 - useRef사용하기

Ref : 컴포넌트의 전 생애주기동안 유지되는 값

- 전 생애주기란? 컴포넌트의 마운트(생성)부터 언마운트(소멸)될 때까지를 의미
- 컴포넌트가 리렌더링 되어도 언마운트 될 때까지 값이 유지됨

 

렌더와 리렌더링

1. 렌더 : render()함수를 통해 화면에 그려주기 

2. 리렌더링 : 부모요소가 주는 props나 state(상태)가 변경 / 업데이트되었을 때 

다시 화면에 그려줌 (이 때, render() 함수가 다시 호출됨)

 

State나 Props의 값이 변경될 때 / Ref값이 변경될 때 차이점

• state나 props 변경 / 업데이트 ☞ 렌더링 발생 ☞ 컴포넌트 내부 변수들 값 초기화(이때 Ref의 값은 유지)
• Ref값 변경 ☞ 렌더링 발생X ☞ 컴포넌트 내부 변수들 값 유지 

 

1. Ref 생성하기 : useRef(value)

// 구문
const ref = useRef(value); // 객체를 반환함

// 반환하는 객체의 형태 
{current : value} // 접근 할 때는 변수명.current로 접근해야 함!

 

2. Ref 수정 / 변경하기 : 변수명.current = "바꾸고 싶은 값"

const refNum = useRef(0); // => 객체 {current : 0} 형태가 담겨있음
// ref의 값을 수정 / 변경하고 싶으면 무조건 .current 써줘야 함!!!
const addRef = () => {
	refNum.current = refNum.current + 1;
}

 

3.  Ref의 용도

• 값이 변경되어도 렌더링이 일어나지 않음, 렌더링이 되어도 초기화되지 않고 값이 유지되는 저장공간
• DOM요소 접근 : 리액트 내에서 자바스크립트의 document.querySelector()과 같은 역할을 함!

import React, {useRef, useState} from 'react';

const DomRefSample = () => {
    // input의 상태관리
    const [name, setName] = useState("");
    // inputRef라는 객체 생성
    const inputRef = useRef();
    // 버튼 클릭했을 때 초기화 해주는 함수
    const onReset = () => {
        // input의 상태 업데이트
        setName("");
        // 자바스크립트 작성법 : document.querySelector('#inputname').focus();
        inputRef.current.focus(); // 위 구문과 같은 작용을 함
    }
    return (
        <div>
            {/* ref={}속성 : inputRef객체의 current값에 input 요소의 레퍼런스가 저장됨! */}
            <input value={name} id='inputname' ref={inputRef}
            // 이벤트가 발생될 때 input의 상태 업데이트
            onChange={(e) => setName(e.target.value)}/>
            <button onClick={onReset}>초기화</button>
        </div>
    );
};

export default DomRefSample;

 

위 예제를 직접 실행시겨보자 ...