React

[React #22] useRef

PEAZH 2024. 3. 7. 16:47
반응형

01. useRef?

  • 컴포넌트 내부에 새로운 Reference 객체를 생성하는 기능
  • 이 Reference 객체는 컴포넌트 내부의 변수로서, 일반적인 값들을 저장할 수 있음
  • 렌더링의 영향을 미치고 싶지 않은 변수를 생성할 때 사용
  • 컴포넌트가 렌더링하는 특정 DOM  요소에 접근과 조작이 가능함
  • ex) 특정 요소에 포커스, 특정 요소의 스타일 변경
const refObject = useRef()
  useRef useState
쓰임 Reference 객체 생성 State 생성
공통점 컴포넌트 내부의 변수로 활용 가능
차이점 어떤 경우에도 리렌더링을 유발하지 않음 값이 변경되면 컴포넌트 리렌더링

 

 

02. useRef  객체 생성

01) useRef import 하기

import { useRef } from 'react';

02) useRef 객체 생성

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

실행화면

  • current라는 프로퍼티를 갖는 객체가 생김 = current 프로퍼티에 현재 보관할 값을 담아두는 객체
  • 인수로 초기값을 설정할 수 있음
  • 값을 사용하고 싶다면 점 표기법으로 사용
  const refObj = useRef(0);
  console.log('Register 렌더링');
  
  return (
    <>
      <button
        onClick={() => {
          refObj.current++;
          console.log(refObj.current);
        }}
      >
        ref +1
      </button>
    </>
  );

 

실행화면

  • 리렌더링을 유발하지 않음
  • 이벤트 핸들러만 계속 실행될 뿐 컴포넌트를 리렌더링 하지 않기 때문에 'Register 렌더링' 메세지는 처음에만 실행됨
  • 그래서 useRef는 컴포넌트 내부에서 렌더링에 영향을 미치지 않아야 되는 변수를 생성할 때 사용

 

03. useRef  활용

01) form에서 사용자의 변경 횟수 알아보기 

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

실행화면

 

 

💡 let을 사용하지 않고 useRef를 사용하는 이유

<let을 이용한 예시 코드 넣기>

  • 수정을 해도 count의 값이 1로 고정됨
  • input의 값을 입력하면 onChange 이벤트 핸들러가 state의 값을 변경해서 리렌더링이 이루어짐
  • 그래서 count의 값이 0으로 리셋됨

그렇다면 변수의 선언을 외부에서 한다면?

<예시코드>

  • 한번만 렌더링 했을 경우에는 수정횟수가 잘 카운팅 되기는 함
  • 하지만, 이 컴포넌트를 두 번 렌더링 하게 된다면 두 개의 컴포넌트가 하나의 변수를 공유함
  • 그래서 컴포넌트 두 번 렌더링 = 파일 전체 실행이 아닌 함수 자체를 두 번 호출하는 것

 

📌 정리 :  컴포넌트 내부의 변수가 필요하다면 렌더링에 영향을 주고싶을 땐 useState, 안 주고 싶을 땐 useRef로 줘야 함

 

 

 

02) DOM 요소 조작하기

  // 새로운 래퍼런스 객체 생성
  const inputRef = useRef('');
  
  // 제출했을 때 이벤트 핸들러
  const onSubmit = () => {
    if (input.name === '') {
      console.log(inputRef.current); // DOM  요소
      inputRef.current.focus(); // 포커스
    }
  };
  
  return (
    <>
      <div>
        <input
          ref={inputRef}
          name='name'
          value={input.name}
          onChange={onChange}
          placeholder='이름'
        />
      </div>
      <button onClick={onSubmit}>제출</button>
  );

실행화면

  • 특정 요소에 포커스를 주려면 래퍼런스 객체를 이용해서 접근해야 함
  • input 태그에 ref 속성을 넣어주면 해당 dom 요소가 'inputRef'라는 래퍼런스 객체에 저장됨
  • 회원가입에서 제출 버튼을 눌렀을 때 빈 문자열이 있다면  dom 요소에 포커스 주기

 

참고자료

이정환 Winterlood, '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지'
반응형