안녕하세요! 오랜만에 벨로그를 작성하러 왔는데요!
API와 React를 공부하면서 너무 어렵게 느끼고 있어서 정리한번 하러 왔습니다!
미흡 하더라도 '코린이라면 그럴 수 있지'라는 생각으로 너그럽게 넘어가 주시거나!
'어디부분이 잘못됬다!' 라고 가르쳐 주신다면 감사하겠습니다!
그럼 가보시죠!
React에서 배열을 렌더링 할때 Key를 써야하는 이유는 무엇일까?
리액트에서는 배열을 랜더링 할 때 Key를 지정해주지 않으면 Key를 찾을 수 없다는 오류를 만나실 수 있을 텐데요!
공식문서에서는
Key는
-react가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고
-엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트를 지정해야합니다.
라고 나와있습니다.
즉 그 값이 변하지 않는 유일한 식별지의 역할을 가지고 있습니다.
Key를 지정하지 않았을 때의 예시입니다.
React는 각 아이쳄을 구분할 수 있는 고유의 값을 알지 못하기 때문에 배열이 업데이트 될 때 문제가 발생합니다.
Key가 없으면 리액트는 배열의 인덱스를 사용하여 업데이트를 수행합니다. 하지만 배열의 인덱스는
항상 일정하지 않기 때문에 예측이 불가능합니다.
Ex) 배열에서 아이템을 삭제하면 인덱스가 변경이 됩니다. 그 결과로는 React는 아이템이 삭제된것으로 판단하지 않고, 단순히 인덱스가 변경된 것으로 판단하여 불필요한 렌더링을 발생 시키게 됩니다..(갑자기 원하는 결과값은 나두고 싶은데 다른것이 삭제되는 큰 일이 나타나게 되는거죠 ㅠㅠ)
위의 예시로 설명하자면 '드람뷔'가 포함된 id값을 지우고 싶은데 갑자기 '깔루아'라는 id값이 삭제가 될 수 있는 것이죠...
Key는 엘리먼트의 변화를 감지합니다.
React에서는 컴포넌트가 State 변경, 이벤트 처리 등으로 인해 렌더링될 때, 가상의 DOM을 통해 이전 렌더링 결과와 새로운 렌더링 결과를 비교하고 변경된 부분만 실제 DOM에 반영이 됩니다. 이때 배열도 마찬가지로 각 원소를 하나씩 비교하고 변경된 부분만 갱신합니다. (다음에 그림까지 넣어서 올리도록 하겠습니다!)위의 내용들을 정리하자면
요소마다 Key로 고유한 값을 지정해주면, 요소를 삭제, 추가하는 등 배열이 변경될 때, 정확히 어떤 요소가 변화한 것인지 알 수 있어서 React가 어떤 항복을 변경하고, 추가하는지 또는 삭제 할 것인지 식별하는 것을 도와주고 있다 라고 정리 할 수 있을 것 같습니다!
다음으로는 React 컴포넌트 생명주기에 대해 알려드리고 싶으나 제가 아직 이해를 못한 부분도 있고 헷갈리는 부분도 많아 충분한 숙지와 이해를 한 후 바로 작성하로 돌아오겠습니다!
생명주기까지 설명 못 드린점 죄송합니다!
그럼 다음번에 만나요! 그럼 20000!!
애증의 리액트.. ㅠㅠㅠㅠㅠㅠㅠㅠ 근데 하면할수록 맛도리느낌이나요 ㅎㅎ;