5. React.js의 useRef

<useRef>

● Reference 객체를 생성

● 컴포넌트 내부의 변수로 활용 가능

● 어떤 경우에도 리렌더링을 유발하지 않음

 

 

1. useRef() 를 이용해서 생성할 수 있음

2. 괄호 안에 들어가는 값은 useRef 의 current 값으로 저장됨

 

import { useState, useRef } from "react";

//간단한 회원가입 폼
const Register = () => {
    const[input, setInput] = useState({
        name : "",
        birth: "",
        country: "",
        bio: "",
    });
    const countRef = useRef(0);
    const inputRef = useRef();

    // 통합이벤트핸들러  
    const onChange = (e) => {
        countRef.current++;
        console.log(countRef.current);
        setInput({
            ...input,
            [e.target.name] : e.target.value,
        })
    }

    const onSubmit = () => {
        if(input.name === "") {
            // 이름을 입력하는 돔 요소에 포커스
            console.log(inputRef);
            inputRef.current.focus();
        }
    }

    return (
        <div>
            <div>
                <input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder={"이름"}></input>
            </div>
            <div>
                <input name="birth" value={input.birth} onChange={onChange} type="date"></input>
            </div>
            <div>
                <select name="country" value={input.country} onChange={onChange}>
                    <option></option>
                    <option value="kr">한국</option>
                    <option value="us">미국</option>
                    <option value="uk">영국</option>
                </select>
                {input.country}
            </div>
            <div>
                <textarea name="bio" value={input.bio} onChange={onChange}></textarea>
            </div>
            <div>
                <button onClick={onSubmit}>제출</button>
            </div>
        </div>
    );
};
export default Register;

 

1. inputRef 라는 이름의 Reference 객체를 생성하고 name input 태그의 ref={ inputRef }를 설정하면

input 태그가 렌더링하는 돔 요소가 inputRef라는 Reference Object에 저장이 됨 

 

2. 제출 버튼에 onClick 이벤트를 설정하고 input state의 name이 빈 값이면 포커스 설정하도록 구현

 

콘솔에 출력해서 확인하면 current에 input이 들어가있는 것을 확인할 수 있음

근데 그냥 변수 만들어서 Reference 객체처럼 사용하면 안됨?

만약 위의 사진처럼 countRef를 만드는 대신 count = 0 으로 변수를 선언해서 count++을 한다고 하면

onChange 이벤트가 실행이 되면서 state의 값을 변경함.

→ 코드를 모두 감싸는 Register 컴포넌트가 리렌더링이 됨

→ count 변수가 매번 초기화되어서 한 번 호출되면 1로 고정값을 가지게 됨 

 

그러나, useRef나 useState를 이용해서 만든 리액트의 특수한 변수들은 

컴포넌트가 리렌더링 된다고 해도 다시 reset 되지 않음

왜냐하면 애초에 내부적으로 그렇게 설계되어 있음

 

그럼 변수 선언을 컴포넌트 바깥에 선언하면 안됨??

→ 가능하지만,, 만약 컴포넌트를 두 번 렌더링하면 되면 각각의 컴포넌트가 하나의 변수를 공유하게 됨

왜냐하면, 파일 전체가 두 번 실행되는게 아니라 Register 함수만 두 번 호출하기 때문