React , 예제로 살펴보는 useRef /Ref 요소 선택 기본 사용 1

과제 1. (useRef)
이름과 전화번호의 입력창을 받는다.
각각 등록버튼이 있고 그 값을 저장한다.
이름을 입력후 등록을 누르면 input 창이 비활성화 되고 다음 전화번호의 입력창으로 간다.
전화번호의 입력창을 등록하면 전화번호도 input창이 비활성화 된다.

 

 

값을 저장하는 방법으로 state의 값을 onClick 이벤트를 통해 받아오는 방법도 있으나

이번에는 해당하는 창을 비활성화 할 수 있게 ref 를 사용해보자.

 

1.useRef 의 선언.

import { useRef } from 'react';

 

2. 컴포넌트 retrun 제작

return (
        <>
            <div>
                <label>
                    이름
                    <input type="text" ref={inputName} />
                </label>
                <button onClick={registeredName}>등록</button>
            </div>

            <div>
                <label>
                    전화번호
                    <input type="text" ref={inputPhoneNum} />
                </label>
                <button onClick={registeredPhoneNum}>등록</button>
            </div>
        </>
    );

 

3. 컴포넌트 내의 useRef 의 선언.

    const inputName = useRef(),
        inputPhoneNum = useRef();

 

4. 컴포넌트 내 클릭 이벤트 registeredName 함수 정의

- 함수의 역할 : 창의 비활성화 / 포커스 옮기기

    function registeredName() {
        inputName.current.disabled = true;
        inputPhoneNum.current.focus();
    }

4.컴포넌트 내 클릭이벤트 registeredPhoneNum 함수 정의

-함수의 역할 : 창의 비활성화

    function registeredPhoneNum() {
        inputPhoneNum.current.disabled = true;
    }

 

 

예제를 통해서 알 수 있는 것.

-useRef 함수를 이용하여 컴포넌트 내의 요소의 참조를,

변수를 통해 HTML 요소 참조가 가능하다.

-useRef 할당 대상은 단일 참조변수만 가능하다.

(즉, 구조분해 할당 또는 조건부 할당 , 배열 요소에는 할당 불가.)

-최초의 요소 랜더링이 진행되어야지만 , 요소들에 대한 참조를 받기에

동기식 처리에는 참조 사용이 불가하다.

즉 최초의 마운팅 시점에 있는 요소들만 참조사용이 가능하다.

 

-전체 코드

function PersonalInfo() {
    const inputName = useRef(),
        inputPhoneNum = useRef();
    
    function registeredName() {
        inputName.current.disabled = true;
        inputPhoneNum.current.focus();
    }

    function registeredPhoneNum() {
        inputPhoneNum.current.disabled = true;
    }

    console.log(inputName.current)
    return (
        <>
            <div>
                <label>
                    이름
                    <input type="text" ref={inputName} />
                </label>
                <button onClick={registeredName}>등록</button>
            </div>

            <div>
                <label>
                    전화번호
                    <input type="text" ref={inputPhoneNum} />
                </label>
                <button onClick={registeredPhoneNum}>등록</button>
            </div>
        </>
    );
}

---

 

 

이어서 use ref 시리즈 예제

여기를 클릭해 주세요

React , 예제로 살펴보는 useRef /Ref 요소 선택 기본 사용 1

React , 예제로 살펴보는 useRef /Ref 요소선택 배열사용 2

React , 예제로 살펴보는 useRef /Ref 요소선택 배열사용 2