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

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

여기서 말하는 변수는 만약 컴포넌트 내부에서 let키워드를 사용해서 변수를 선언하게 된다면 리렌더링 시 그 변수값은 초기화 되게 된다.

유지하고 싶은 어떤 값을 관리하려면 이전에 배웠던 useState를 사용해야 하는데 useState의 경우 상태를 바꾸게 되면 리렌더링 된다.
어떤 값을 바꿀 때 굳이 리렌더링 할 필요 없는 값을 관리할 때가 있는데 이때 useRef를 사용하면
된다.

이전에 useRef는 특정돔을 선택해야 할 때 ,ref를 사용해야 할 때 사용한다고 배웠는데, 이 것 외에도 컴포넌트가 리렌더링 될 때마다 계속 기억할 수 있는 어떤 값을 관리할 때에도 사용할 수 있다.

App컴포넌트에서 useRef를 이용해서 변수를 관리해 볼 것이다. 용도는 앞으로 배열에 새 항목을 추가할 때 사용할 고유 아이디 값을 관리하기 위해서 사용한다.

여기서 nextId를 useRef로 관리해준 이유는 이 값이 바뀐다고 해서 굳이 컴포넌트가 리렌더링 될 필요가 없기 때문이다.
사실은 useState로 관리해도 되지만 리렌더링 되어야 할 값은 아니기 때문에 위와 같이 변수로 관리해도 된다.

💡 요약
useRef는 우리가 특정 돔을 선택할 때에도 사용할 수 있지만 어떤 변수를 계속 기억하고 싶을 때 사용하며 컴포넌트가 리렌더링 되더라도 값은 그대로 유지되기 된다.