ToDoList 과제가 한창 중이었고, 완성했으나 뜻밖의 문제를 발견했다.
문제
id 값을 배열의 length로 주었는데 발생한 오류!
- 게시물은 3개 작성한다. -> id값이 순서대로 1, 2, 3이 주어진다.
- 게시물 id 2값을 갖고 있는 게시물 1개를 삭제해 주었다. -> 1,3 id 값을 갖고 있는 게시물이 남는다.
- 게시물 하나를 더 작성한다. -> 1, 3, 3 id 값을 갖고있는 게시물이 생겨난다.
🚨con) 중복되는 id값 때문에, Delete, Update 기능에 에러가 발생
해결과정
id 고유값을 지정해 주어 해결해보자!
useState를 이용해 고유id값 만들어주기
onSubmit핸들러가 실행될 때 마다 id값에 +1 해서 고유 id를 부여해 준다
useRef 를 이용해 고유 id값 만들어주기
useRef 는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. - React 공식 홈페이지
useRef를 사용하여 id 값을 생성하면, useRef는 컴포넌트의 생명주기와 관계없이 유지되는 값이다.
컴포넌트가 다시 렌더링되어도 useRef로 생성된 id 값은 변경되지 않는 특성이 있다!
따라서 동일한 id 값을 가진 요소가 이전과 동일한 것으로 판단하여 변경된 부분만 업데이트하고 나머지 부분은 유지할 수 있습니다.
1. useRef 사용예시(변수관리)
여기 useState를 사용해 값을 저장한 stateCount, useRef를 사용해 값을 저장한 refCount, 변수를 통해 값을 저장한 varCount가 있다.
ref up 버튼을 누르면 각각의 값이 올라가고 콘솔창에 출력이 되는 형태인데, ref up을 아무리 눌러도 콘솔창에만 출력되고 화면에 렌더링이 되지 않는것을 확인할 수 있다.
하지만 state up 버튼을 누르면 화면이 렌더링되면서 올려놨던 refCount값도 화면에 출력되게 된다. 이를 통해 우리는 useRef로 관리하는 값은 값이 변해도 화면이 렌더링되지 않음을 알 수 있다.
또 var up 버튼을 통해 변숫값을 아무리 높혀놔도 state up 버튼을 통해 렌더링을 한다면, 컴포넌트 내부에 있는 let varCount = 0; 이 계속 실행되기에 값이 초기화된다.
2. useRef 사용 예시
focus버튼을 누르면 input 창에 focus되는 것을 확인할 수 있다.
useRef를 통해 마운트될 때 focus되게 설정해놓을 수도 있지만 블로그 포스팅이라는 환경 상, 버튼을 누르면 focus되도록 설정해놓았다.
또 focus 버튼을 누르고 콘솔창에 useRef를 통해 선택된 DOM 요소를 확인할수 있도록 해놓았으니 한번쯤 확인해보면 좋을 듯 하다.
