useRef() 리렌더링

문제 상황

router와 react-redux로 투두리스트를 구현하던 중 todo의 id값을 useRef()로 관리하고 있었다.
그런데 잘 작동하던 useRef()가 TodoListPage에서 원하는 todo를 클릭해서 상세페이지(TodoDetailPage)로 이동 후, 다시 TodoListPage로 돌아오면 리렌더링이 발생하고 useRef()가 초기값으로 돌아가서 todo를 추가하는 순간 id값이 중복되는 문제가 발생했다.

어떻게 해결할까?

일단 console.log()를 찍어가며 찾아보니 페이지 이동 시 전체 페이지의 리렌더링이 발생하면서 useRef() 객체의 current 값이 초기화되고 있었다.
그래서 useSelector()를 사용해 todolist 배열을 불러와 마지막 요소의 id를 찾아내 useRef()의 초기값으로 설정해주기로 했다.

const Form = ({ todolist }) => {
  const lastId = todolist.length ? todolist[todolist.length - 1].id + 1 : 1;
  const nextId = useRef(lastId);

  const [todo, setTodo] = useState({
    id: nextId.current,
    title: '',
    content: '',
    isDone: false,
  });