react useRef 사용해보기

루티너리를 만드는 프로젝트를 진행중에 막히는 부분이 있었다.

todo list 처럼 routine list를 만드는데 id 값이 고정되어 있어서 수정을할때 루틴 전부 다 수정이 되고

하나를 삭제하고싶은데 전부 다 삭제가 되는 그런 문제들이 있었다.

 

그래서 루틴이 추가될때마다 id 값을 1씩 증가해주고 싶었다.

 

이때, useRef 훅을 사용할 수 있었다.

👻 useRef

.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.
반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.

useRef는 어떤 가변값을 유지하는데에 편리한 훅이다.

 

 

이것을 프로젝트에 적용해보았다. 

const nextId = useRef(0);

이렇게 id 초기값을 0으로 설정을해두고

 

루틴 리스트 id 부분을

이런식으로 해주었다.

 

 

 

 

 

 

 

그리고 이제 루틴이 추가 될 때마다 id 값이 1씩 증가되도록해주었다.