useRef로 컴포넌트 안의 변수 만들기

컴포넌트에서 특정 DOM을 선택해야할때 ref를 이용해야합니다.
이 ref를 설정하기 위해서는 ReactHook인 useRef를 이용해야합니다.

useRef는 DOM을 선택하는 용도 이외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있습니다.
그러나 useRef를 이용해서 변수를 수정하여도, 컴포넌트가 리렌더링이 되는 것은 아닙니다.

useState로 상태 변화를 준 것은, 그 다음 렌더링 이후로 업데이트된 상태를 조회 할 수 가 있고, useRef로 관리한 변수는 설정 후 바로 조회할 수 있습니다.

useRef로 관리할 수 있는 값들은

• setTimeout,,setInterval를 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• 스크롤 위치

등이 있습니다.

이번에 사용할 useRef의 용도는 배열에 새 항목 추가시, 새 항목에서 사용 할 고유 id를 관리하는 용도입니다.

배열을 App.js에서 선언하고 userList에 props로 전달 하겠습니다.

app에서 배열 선언 후 userList에 props로 전달

import './App.css';
import InputSample from './InputSample';
import UserList from './UserList';


function App() {
  const users=[
    {
      id:1,
      username:'hello1',
      email:'fadsf1@naver.com'
    },
    {
      id:2,
      username:'hello2',
      email:'fadsf2@naver.com'
    },
    {
      id:3,
      username:'hello3',
      email:'fadsf3@naver.com'
    },
    {
      id:4,
      username:'hello4',
      email:'fadsf4@naver.com'
    },
  ]
  return (
    <UserList users={users} /> // 배열을 props로 전달
  );
}

export default App;

UserList.js

import React from 'react'


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


function UserList({users}) {

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

export default UserList

이제 App.js에서 useRef()를 사용하여 nextId라는 변수를 만들겠습니다.

App.js

const nextId=useRef(4);
  const onCreate = ()=>{
    //TODO
    nextId.current +=1;
  }

useRef() 사용시 파라메터를 넣어주면 이 값이 .current값이 됩니다.
해당 코드에서는 .current값이 4가 됩니다.