[React] useRef - reference 생성

이번 글은 리액트에서 useRef을 사용하는 방법에 대한 글이다.

 

---

 

[ useRef란? ]

useRef는 새로운 reference 객체를 생성하는 함수이다.

렌더링에 영향을 미치지 않는 변수 생성 시 사용된다. ( <ㅡ> useState() )

	useRef	useState
	레퍼런스 객체 생성	스테이트를 생성
	컴포넌트의 내부의 변수로 활용가능
	리렌더링 X	리렌더링 O
	렌더링에 영향을 주지 않는 변수 생성 시 사용	렌더링이 필요한 변수 생성 시 사용

 

 

useRef나 useState로 만든 리액트의 특수한 변수들은 컴포넌트가 리렌더링되어도 리셋이 되지 않지만 일반 변수의 경우 리렌더링 시 값이 리셋이 된다.

(컴포넌트 내부의 변수가 필요하다면 렌더링의 유무에 따라 useRef 또는 useState를 사용)

 

 

current 프로퍼티에 0이라는 초기값을 저장하고 있는 레퍼런스 객체가 출력된다.

=> refObj.current : 객체의 값인 0을 가리킨다.

const refObj = useRef(0);
  console.log(refObj);

결과

 

---

 

[ 예제 1 - useRef 활용하기 ]

아래 예제는 콘솔에 값이 수정될 때마다 수정된 횟수를 출력하는 예제이다.

 

1) useRef의 초기값을 0으로 하여 변수를 생성한다.

const countRef = useRef(0);

 

 

2) 값이 수정 시 실행되는 onChange함수가 실행될 때마다 값이 1씩 추가되고 이를 콘솔창에 출력하도록 작성한다.

countRef.current++;
console.log(countRef.current);

  const countRef = useRef(0);

  const onChange = (e) => { 
    countRef.current++;
    console.log(countRef.current);
    setInput({
        ...input,
        [e.target.name] : e.target.value,
    });
  };

 

 

---

 

[ 예제 2 - useRef 활용하기 ]

아래 코드는 name 입력란이 비어있을 경우 포커스가 실행되는 코드이다.

제출 버튼을 누를 시 실행되는 onSubmit 함수의 경우 name의 값이 비어 있을 때 해당 부분을 focus() 해준다

=> onSubmit()이 input에 닿아 정보를 가져오기 위해서 레퍼런스가 사용되는데 이때 input 안에 inputRef를 넣어주어 input에서 렌더링하는 정보들이 inputRef에 저장되도록 한다.

  const inputRef = useRef();

  const onSubmit = () => {
    if (input.name === "") {
      inputRef.current.focus();
    }
  }

<input ref={inputRef} name="name" value={input.name} onChange={onChange} placeholder={"이름"} />

<button onClick={onSubmit}>제출</button>

 

 

---