[React] useRef, createRef 를 사용하는 방법

useRef 를 사용하는 방법

 

JS 에서는 특정 DOM을 선택하기 위해 getElementById 또는 querySelector 같은 DOM selector 함수를 사용해서, DOM 을 선택합니다.  React에서도 특정 DOM을 선택해야할 때가 가끔씩 발생할 수 있습니다. 예를 들어 element의 크기나 특정 이미지를 가져와야 하거나, 스크롤바 위치를 설정하거나 focus를 설정한다거나 추가적으로 html 에서의 <video > 같은 관련 라이브러리를 사용하는 등 다양한 상황에서 DOM을 사용하기 위해서 ref를 사용합니다. 

• 함수형 컴포넌트에서 ref를 사용할 때는 useRef라는 Hook 함수 사용
• 클래스형 컴포넌트에서 ref를 사용할 때는 React.createRef를 사용합니다. 

function InputSample() {
    const [inputs, setInputs] = useState({
        name: "",
        nickname: "",
    });
    const nameInput = useRef(); // 1) useRef를 만들면 useRef 객체가 만들어집니다
    const { name, nickname } = inputs; 

    const onChange = (e) => {
        const { name, value } = e.target;
        const nameInput = useRef();
        
        setInputs({ 
            
            ...inputs, 
            [name]: value, 
        });
    };

    const onReset = () => {
        setInputs({
            name: '',
            nickname: '', 
        })
        nameInput.current.focus(); // 3) useRef를 하게되면 DOM을 직접 접근할 수 있게 되는데 여기서 current가 DOM을 접근하게 되는데 current 하고 사용할 API를 적어주면 됩니다.
    };

    return (
        <div>
              <input 
            name="name"
            onChange={onChange}
            placeholder="이름"
            value={name}  
            ref={nameInput} /> // 2) 만들어진 useRef를 선택하고 싶은 DOM에 useRef를 설정해주고 호출해줍니다. 
            <input name="nickname" onChange={onChange} placeholder="닉네임" value={nickname}/> 
            <button onClick={onReset}>초기화</button>
            <div>
                <b>값:</b>
            </div>
        </div>
    );
}

 

useRef 를 사용하는 법

1) useRef를 만들면 useRef라는 객체가 만들어집니다

2) 만들어진 useRef를 선택하고 싶은 DOM에 useRef를 설정해주고 호출해줍니다. 

3) useRef를 하게되면 DOM을 직접 접근할 수 있게 되는데 

선언한useRef명.current.사용할 API명()

선언한useRef명.current.사용할 API명()

여기서 current가 DOM을 접근하게 되는데 current 하고 사용할 API를 적어주면 됩니다.

 

정리하자면, 

1) useRef를 불러옵니다

2) useRef를 호출해줍니다

3) 호출해서 만든 객체를 ref라는 값으로 설정해주고, 나중에 해당 DOM을 선택하고 싶을 때에는 

우리가 만든 객체.current.사용할 API명()

 

createRef를 사용하는 방법

class RefSample extends Component{
    input = React.createRef(); // 1) 우선 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아줍니다

    handleFocus = () => {
        this.input.current.focus(); // 3) 설정한 뒤 나중에 ref를 설정해준 DOM에 접근하려면 this.input.current를 조회하면 됩니다. 
    }

    render(){
        return(
            <div>
                <input ref={this.input} /> // 2)해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어주면 ref 넣어 주면 ref 설정이 완료됩니다
            </div>
        )
    }
}

export default RefSample;

createRef를 사용하여 ref를 만드는 과정

1) 우선 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아줍니다

2) 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어주면 ref 넣어 주면 ref 설정이 완료됩니다

3) 설정한 뒤 나중에 ref를 설정해준 DOM에 접근하려면 this.input.current를 조회하면 됩니다.