[React.js] useRef로 컴포넌트의 변수 생성하기

useRef란

새로운 Reference 객체를 생성하는 기능 이다.

const refObject = useRef()

컴포넌트 내부 변수로 일반적인 값들도 저장이 가능하다.

useRef                                                           useState

Reference  객체를 생성                                 State를 생성

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

어떤 경우에도 리렌더링을 유발하지 않음     값이 변경되면 컴포넌트 리렌더링

 

리렌더링을 유발 시키지 않은 그런 변수를 만들고 싶을때 useRef를 사용

useRef는 특정 DOM 요소에 접근할수 가있다.

해당요소를 조작할 수 있다.

특정 요소에 Focus를 준다던지 Styil을 변경할 수 있다.

 

const refobj = useRef(0);

  console.log("Register 렌더링");

 

return (

    <>

      <button

        onClick={() => {

          refobj.current++;

          console.log(refobj.current);

        }}

      >

        ref +1

      </button>

 

이처럼 버튼을 클릭하면 새로 렌더링이 되지 않는걸 볼 수 있다.

 

useRef를 이용해 돔요소 접근

const [input, setInput] = useState({

    name: "",

    birth: "",

    country: "",

    bio: "",

  });

 

const inputRef = useRef();

 

const onsubmit = () => {

    if (input.name === "") {

      //이름을 입력하는 DOM 요소 포커스

      inputRef.current.focus();

    }

  };

return (

     <div>

        <input

          ref={inputRef}

          name="name"

          value={input.name}

          onChange={onChange}

          placeholder={"이름"}

        />

      </div>

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

 

제출버튼을 눌럿을때 onsubmit 함수에서 name에 빈문자열이라면 해당DOM 요소에 Focus를 맞춤