react key (스테픈 2km완료)

이런식으로 보통 map반복문으로 key를 아무생각없이

사용하고 있었는데

이 키값이 고유한 값이어야하는건

매번 오류메시지를 통해 알고는 있었지만

이 key로 엘리먼트들을 식별하기 위해서 사용한다는 점은 알고는 있었으나

여기에 별다른 의미나 기능에 대해 깊게 생각해본적은 없다.

정확하게 표현하자면 식별하는 기능이 있다는건 알았지만

이렇게 식별하는 기능을 어떻게 활용해서 쓰는지에 대한 고민을 해본적이 없다.

단순히 안쓰면 이렇게 오류가 콘솔에 뜨기때문에 (물론 오류는 뜨지만 사이트가 터지는 문제는 없다,)

그간 유니크한 키값을 넣으려고 했었지만

막상 정확하게 이걸로 무엇을 어떻게 하려고

쓴적은 없는것 같다.

여기에 작성되는 key는

리엑트에서 어떤 엘리먼트가 변경되었는지, 추가되었는지, 삭제되었는지를 알기 위해 사용하는 중요한 속성인데

이를 역으로 해석하자면

키값이 변경되면 해당 엘리먼트가 변경되었다는 이야기 인데

따라서 key 값이 변경되면, React는 해당 엘리먼트를 완전히 새로운 엘리먼트로 인식하게 된다.

결과적으로, 이전 엘리먼트를 언마운트하고 새로운 엘리먼트를 마운트하게된다.

이것을 잘 생각해보면

useState를 사용해서 값을 변경한것 처럼

새로 렌더링을 시킬 수 있다는 말인데.

몇가지 차이점이 존재한다.

useState의 값을 변경하면 해당 컴포넌트에서 useState를 제외한 나머지 상태값은 변경되지 않는데

key값이 변경되면 해당 key가 적용된 모든 엘리먼트가 통째로 언마운트 -> 마운트 과정을 거치게 된다.

일단 이를 테스트를 한번 해보려고 한다.

일단 테스트를위해 props를 전달받도록 변경하고

전달받은 props를 key에 매칭시켰다.

부모 컴포넌트에서 props로 준 값을 변경시키면서 테스트를 해봤는데

내가 생각하는 것처럼 빠릿하게 반응하는건 아니고

useState로 작성하면 어차피 렌더링이 발생하니

useRef로 값을 수정해보고 key값이 변경되면 언마운트 마운트가 다시 되는 과정을 보려고 한다.

화면 테스트 결과 리렌더링이 발생하지 않는다.

이유를 생각해보면 ref 자체가 화면 렌더링을 시키는것과 관련이 없어서 그런것 같은데

useState로 만들면 해당 변수가 수정되면 렌더링이 발생하기 때문에

key가 언마운트 -> 마운트 과정을 거쳐 렌더링이 다시 발생되었는지 테스트가 조금 어렵지 않나 쉽다.

일단 오늘 공부해본 내용을 토대로 이해하자면

key값을 임의로 변경시키면 해당 key의 엘리먼트가 언마운트 -> 마운트 과정을 거쳐 화면 렌더링이 발생하게된다.

일반적으로 useEffect로 화면 렌더링 처리하던 부분을 key값을 변경시키는 방식으로도

유사하게 렌더링 처리가 가능할것 같은데