목록컴포넌트 (1)

Jeden Tag, aufrichtig und lustig.

4. 리액트 라이프사이클과 컴포넌트 Key값의 상호작용 이슈

1. 발생 이슈 새로운 블록이 추가되는 기능을 구현하던 도중 컴포넌트의 key값과 관련하여 문제가 발생했다. 블록 추가 버튼을 눌렀을 때 기대했던 것은 한개의 블록이 추가되는 것이었는데, 실제로는 동일한 idx값을 가진 두 개, 세 개, 때로는 네 개의 다수의 블록이 동시에 추가되는 현상이 발생했다. 빠르게 버튼을 연타하지도 않았기 때문에 블록의 상태 관리와 추가되는 새 블록의 상태관리 로직을 살펴보고 콘솔로도 확인을 해보며 디버깅을 했다. 2. 문제 이유 블록이 렌더링 될 때마다 key값이 새로 할당 되는 로직이 문제였다. 리액트에서는 key라는 속성을 활용해서 자식 컴포넌트들을 유니크하게 식별한다. 그렇기 때문에 렌더링할 때마다 모든 블록 컴포넌트의 key 값이 변경 되면 리액트가 올바르게 컴포넌트를..
React 2023. 9. 19. 15:18
이전 Prev 1 Next 다음