Chapter03. 리엑트 훅 / useRef 훅

<< 학습 목표 >>

1. useRef 훅을 사용해 태그를 저장할 수 있다.

2. useRef 훅을 사용해 저장한 태그를 핸들링할 수 있다.

---

useState 익히기 글 ( https://codingaja.tistory.com/79 ) 에서 언급했지만 소스 파일 내 여러 언어가 섞여있는 것 보다 한 가지 언어만 있는게 가장 이상적인 소스 파일이라고 했음

소스 파일 안에 JS 코드, 리엑트 코드가 혼잡하게 섞여있다면 프로젝트의 규모가 커지면서 점점 복잡해짐

 

useState 익히기 글에서 만든 컴포넌트 중 하나를 보자

import React, {useState} from 'react';

function Component7() {
    const [message, setMessage] = useState(null);

    let clickBtn = () => {
        let messageTag = document.getElementById("message");

        setMessage(messageTag.value);
    };

    let clearMessage = () => {
        let messageTag = document.getElementById("message");
        messageTag.value = "";

        setMessage("");
    };

    return(
        <div>
            <p>{message}</p>
            <hr />
            <input type="text" id="message" placeholder="메세지 입력" />
            <button type="button" onClick={clickBtn}>입력한 메세지 출력</button>
            <button type="button" onClick={clearMessage}>초기화</button>
        </div>
    );
}

export default Component7;

 

이 컴포넌트는 메세지를 입력하고 [ 입력한 메세지 출력 ] 을 클릭하면 clickBtn 함수가 호출됨

clickBtn 함수 내에서는 id가 message인 input 태그를 불러와(1) input 태그 내 입력한 값을 setter 를 사용해 저장함(2)

이때 id가 message인 input 태그를 불러올 때 JS 코드가 들어가 있음(1)

 

이렇게 태그를 불러오고 싶을 때 리엑트에서는 useRef 훅을 사용함

지금까지는 훅이 변화에 반응하는 훅이었는데 useRef 훅은 변화에 반응하지 않는, 태그를 불러오기 위해 태그를 미리 저장해두는 용도의 훅임

 

위 컴포넌트를 useRef 훅을 사용해 태그를 불러오는 컴포넌트로 바꿔보자

프로젝트 -> src -> Component20.jsx 파일을 추가 하고 아래 코드를 추가하자

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

function Component7() {
    const inputRef = useRef(null);
    const [message, setMessage] = useState(null);

    let clickBtn = () => {
        setMessage(inputRef.current.value);
    };

    let clearMessage = () => {
        inputRef.current.value = "";

        setMessage("");
    };

    return(
        <div>
            <p>{message}</p>
            <hr />
            <input type="text" id="message" placeholder="메세지 입력" ref={inputRef} />
            <button type="button" onClick={clickBtn}>입력한 메세지 출력</button>
            <button type="button" onClick={clearMessage}>초기화</button>
        </div>
    );
}

export default Component7;

 

<< 코드 설명 >>

(1). useRef 훅을 사용하기 위해 import

(2). useRef 훅을 사용해 태그를 저장할 변수 선언

(3). useRef 훅을 사용해 input 태그를 inputRef 변수에 저장

  useRef 훅을 사용할 때는 태그에 ref={태그를저장할변수명} 을 사용함

(4). inputRef 변수에 저장된 input 태그에 입력한 값을 가져오거나 변화시키고 있음

 

여기서 특징적인 부분은 (4) 에서 input 태그에 접근하기 위해 inputRef.current 로 접근했다는 점임

inputRef 안에는 태그가 저장되어있는데 inputRef 안에 current 안에 저장되어있음