리엑트는 변경된 부분만을 재랜더링하는 방법으로 실행된다. 이때 같은 엘리먼트의 차이를 key값을 통해 인식한다.
-> 👀 key를 부여하지 않을 경우, 콘솔창에 다음과 같은 warning을 확인할 수 있다.!
key를 통해 변화를 알아차리는 react
key는 map으로 만들어진 component의 식별을 돕는 attribute이다. 고유한 값을 갖는 key를 통해 엘리먼트를 구분하고. 변경, 추가 및 삭제를 할 수 있다.
가장 좋은 방법은 key값을 문자열로 할당하는 것이다. 일반적으로 데이터의 id를 key로 사용한다.
또 다른 방법으로는 항목의 인덱스를 key로 사용할 수 있다. 하지만 항목의 순서가 바뀔 수 있는 경우 인덱스인 key는 재배열 중에 문제가 발생할 수 있다. 컴포넌트의 인스턴스는 key를 기반으로 움직이게 되는데, 항목의 순서가 바뀌면서 key값에 부여된 인덱스가 수정되고 결과적으로 의도한 바로 움직이지 않을 가능성이 크다.
미리 입력한 데이터를 바탕으로 map이 render될 수 있도록 만들어보았다. 처음에는 userld로 key값을 부여했는데, 동일한 아이디로 댓글을 쓸 경우 중복되는 값이 되므로 서로 다른 숫자로 key값을 주는 것으로 수정했다.
-> 여전히 좋은 방법이 아닌 것 같다는 생각이 든다..
위의 경우는 저장된 데이터를 불러올때 할 수 있는 방법이다.
새로운 댓글이 생길때마다 동적으로 key값을 만들 수는 없을까..?
고민 끝에 댓글이 입력된 시간을 key값으로 할당해보았다.
Math.random()을 사용하는 것보다 더 안좋은 방법이라고 하는데.. 어떻게 수정하는 것이 좋을 지 잘 모르겠다..😱
