[React] Study #11 | useRef 로 컴포넌트 안의 변수만들기

💡이전의 ref?

• 특정 DOM을 선택해야할 때 사용 
• 함수형 컴포넌트에서 이를 설정 할 때 useRef를 사용하여 설정함

 

💡ref의 또다른 용도

• 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음
• useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않음.
  • 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회 가능
• 어떤 값을 관리할 수 있을까?
  • setTimeout, setInterval을 통해 만들어진 id
  • 외부 라이브러리를 사용하여 생성된 인스턴스
  • scroll 위치

---

💡해볼것?

• 배열에 새 항목을 추가할때, 새항목에서 사용할 고유 id를 관리하는 용도

1️⃣ 배열을 App 에서 선언하고 UserList 에게 props로 전달

App.js

import React from 'react'; 
import UserList from './UserList';

function App() {
  const users = [
    {name: 'John', age:19},
    {name: 'Car', age:20},
    {name: 'lee', age:14},
];
  return (   
      <UserList users={users}/>
  );
}

export default App;

UserList.js

import React from 'react'

function User({user}) {
    return(
        <div>
            <span>{user.name}</span>
            <span>{user.age}</span>
        </div>
    )
}

function UserList({users}) {

    return (
        <div>
            {/* 배열을 렌더링할때, key라는 props를 설정해주기!! */}
            {users.map(user => (
                <User user={user} key={user.id}/>
            ))}
        </div>
    )
}

export default UserList

 

2️⃣ App 에서 useRef()를 사용하여 nextId 라는 변수 생성

App.js

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

function App() {
  const users = [
    {name: 'John', age:19},
    {name: 'Car', age:20},
    {name: 'lee', age:14},
];

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

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

export default App;

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

 

 

 

---

Reference

https://react.vlpt.us/