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

 

 

예를 들어 컴포넌트 내부에 let 키워드를 사용하여 변수를 선언했을 때 다음 렌더링이 될 때 변수 값이 초기화 된다.

만약 유지하는 값을 관리하려면 useState를 사용해야 하는데,  useState는 상태를 바꾸게 되면 컴포넌트가 리 랜더링 된다.

 

하지만, 가끔 어떤 값을 바꿨을 때 굳이 리렌더링 할 필요 없는 값을 관리하는 경우도 있다.

이럴 때 useRef를 사용하면 된다.

 

useRef는 특정 DOM을 선택해야할 때 사용하는데

이것 외에도 컴포넌트가 리 렌더링 될 때마다 계속 기억 되는 값을 관리할 때도 사용할 수 있다.

 

주로 setTimeout, setInterval을 사용했을 때 주어지는 ID값을 기억해야 할 때 사용하고

외부 라이브러리를 사용하여 생성된 인스턴스를 담을 때도 사용하고, 스크롤 위치 등을 알고 있어야 될 때 등에 사용한다.

 

알아 두어야 할 것은 useRef 관리하는 값은 바뀌어도 컴포넌트가 리 렌더링 되지 않는 다는 것이다.

 

바로 이전 챕터에서 작성한 UserList.js 파일을 활용하여 진행한다.

먼저 이전 챕터의 UserList() 안에 선언된 배열을 주석처리 한다.

function UserList({ users }) {
    // const users = [
    //     {
    //         id: 1,
    //         username : 'kwkim',
    //         email : 'hi@gmail.com'
    //     }, 
    //     {
    //         id: 2,
    //         username : 'tester', 
    //         email : 'tester@gmail.com'
    //     },
    //     {
    //         id: 3,
    //         username : 'developer',
    //         email : 'developer@gamil.com'
    //     }
    // ];
    return (  
        <div>
            {   
                // map을 사용하여 엘리먼트 형식으로 변환
                // map은 기존 배열의 내용을 통체로 변경할 때 사용한다.
                // 즉 해당 예시에서는 users라는 배열을 <User user={user} key={user.id}/> 라는 형식으로 변경해서 화면에 뿌려주는 것이다.
                users.map(
                    user => (<User user={user} key={user.id}/>)
                )
            }
        </div>
    )
}

 

app.js로 이동하여 UserList.js에 작성되었던 배열을 선언 및 아래 소스를 추가한다.

function App() {
  // 이전에 userList.js의 UserList() 안에 있던 배열을 여기서 선언한다.
  const users = [
    {
        id: 1,
        username : 'kwkim',
        email : 'hi@gmail.com'
    }, 
    {
        id: 2,
        username : 'tester', 
        email : 'tester@gmail.com'
    },
    {
        id: 3,
        username : 'developer',
        email : 'developer@gamil.com'
    }
];
// 해당 값은 컴포넌트가 리 렌더링 되어도 계속 기억된다.
const nextId = useRef(4);

// 새로운 항목을 추가할 때
const onCreate = () => {
  // nextId에 담아둔 4라는 값을 조회
  console.log(nextId.current) // 4
  // onCreate 함수가 실행될 때마다 기존 값에 1을 더해줌
  nextId.current += 1;
}
  return (
      <UserList users={users} />
   )
}