useRef로 component 안에 변수만들기

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

어떤값을 바꿨을 때 리랜더링 할 필요가 없을 때 useRef를 사용한다

컴퍼넌트가 리랜더링 될때마다 계속 기억 할 수 있는 어떠한 값을 관리 할 때 사용한다.

ex)
setTimeOut, setInterval의 id
외부 라이브러리를 사용하여 생성된 인스턴스
scroll 위치 ...

useRef를 사용하는 컴퍼넌트는 값이 바뀌어도 리랜더링 되지 않는다.

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


function App() {

  const users = [
        {
            id: '1',
            username: 'sjho0428',
            email: 'sjho0428@gmail.com'
        },
        {
            id: '2',
            username: 'tester',
            email: 'tester@gmail.com'
        },
        {
            id: '3',
            username: 'everton',
            email: 'everton@gmail.com'
        }
    ];

    const nextId = useRef(4);
    // 앞에 id가 3개가 존재하기 때문에 초기값을 4로 설정한다
  // 굳이 리랜더링 될 필요가 없기 때문에 useRef를 사용한다.

    const onCreate = () => {
      console.log(nextId.current);
      nextId.current += 1;
    }
    // 항목추가 함수

  return (
    <UserList users={users}/>
    )
}

export default App;