[React] useRef

ref

: JavaScript 를 사용할때, 특정 요소를 선택해야하는 상황에서 getElmentById, querySelector 와 같은 리액트의 DOM 선택함수

useRef

: 함수형 컨포넌트에서 ref를 사용할때 useRef 라는 Hook 함수사용

1. DOM 선택

<초기화버튼 클릭시 이름 input에 포커스가 잡히도록 기능구현>

import React, { useState, useRef } from 'react';
function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });
  const nameInput = useRef();

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = e => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

1. useRef() 를 이용하여 Ref객체를 만듦

   const nameInput = useRef();```

2. 객체를 선택하고 싶은 요소(DOM)에 ref 값 설정해줌(.current)

    <input name="name" placeholder='이름' onChange={onChange} value={name} ref={nameInput}/>```

3. focous() DOM API 호출

    nameInput.current.focus();

   
   

2. 컴포넌트 안의 변수 만들기

• 컴포넌트 안에서 조회 및 수정을 할수 있는 변수관리
• useRef 로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다.

1. 배열 App.js에서 선언, UserList에게 props 로 전달

<App.js>

import React from 'react';
import UserList from './UserList';
function App() {
 const users = [
   {
     id: 1,
     username: 'velopert',
     email: 'public.velopert@gmail.com'
   },
   {
     id: 2,
     username: 'tester',
     email: 'tester@example.com'
   },
   {
     id: 3,
     username: 'liz',
     email: 'liz@example.com'
   }
 ];
 return <UserList users={users} />;
}
export default App;

<UserList.js>

import React from 'react';

function User({ user }) {
 return (
   <div>
     <b>{user.username}</b> <span>({user.email})</span>
   </div>
 );
}

function UserList({ users }) {
 return (
   <div>
     {users.map(user => (
       <User user={user} key={user.id} />
     ))}
   </div>
 );
}

export default UserList;

2. nextId 변수 생성
   <App.js>

 import React, { useRef } from 'react';
import UserList from './UserList';

function App() {
  const users = [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com'
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com'
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com'
    }
  ];

  const nextId = useRef(4);
  const onCreate = () => {
    // 나중에 구현 할 배열에 항목 추가하는 로직
    // ...

    nextId.current += 1;
  };
  return <UserList users={users} />;
}

export default App;

useRef() 를 사용할 때, 파라미터를 넣어주면, 이값이 current 값의 기본값이 된다.
값을 수정할 때에는 .current 값을 수정하면 되고 조회할때에는 .current를 조회하면 된다.