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

• 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리

• useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않습니다.

• 컴포넌트는 그 컴포넌트의 state나 props가 변경 될 때마다 호출되는데(re-rendering),
  함수형 컴포넌트는 일반 자바 스크립트 함수와 마찬가지로 호출될 때마다 함수 내부에 정의된 로컬 변수들을 초기화 한다.

  반면 useRef로 만들어진 객체는 React가 만든 전역 저장소에 저장되기 때문에 함수를 재 호출 하더라도 마지막으로 업데이트한 current값이 유지된다.
  

App.js

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

function App() {
  const users = [
    {
        id: 1,
        username: 'jini',
        email: 'genie9105@gamail.com'
    },
    {
        id: 2,
        username: 'biki',
        email: 'biki@gmail.com'
    },
    {
        id: 3,
        username: 'nado',
        email: 'nado@gmail.com'
    }
];
  const nextId = useRef(4); //useref의 초기값은 4
  const onCreate = () => {
    //나중에 구현 할 배열에 항목 추가하는 로직
    console.log(nextId.current); //4
    nextId.current += 1;
  }
    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;

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C