리액트 배열 컴포넌트 (성능관련)

Question

리액트 책을 읽던중 배열 컴포넌트는 배열 요소의 개수만큼 반복하므로 성능에 영향을 많이 주기에배열 컴포넌트에 키값을 key로 꼭 정의 해주어야 한다. 키값을 정의하여 출력한 배열 컴포넌트는 다시 출력해야 하는 경우 리액트 엔진이 기존의 컴포넌트를 재활용하여 성능을 높일 수 있기 때문입니다. 제가 이해한게 만약 배열의 내용이 수정될경우 배열 컴포넌트를 다시 부르는건 비효율적이므로key값을 통해 변경한다? 이게 맞나요? &#34; 리액트 엔진이 기존의 컴포넌트를 재활용하여 성능을 높일 수 있기 때문입니다. &#34; 이 말이 도저히 이해가 되지 않네요.. 선배님들 이게 어떤 뜻일까요??

코딩을지켜츄 · Accepted Answer

저도 좀 헷갈려서 찾아보니 여기 잘나와 있네요https://ko.reactjs.org/docs/reconciliation.html#recursing-on-children

first
second

first
second
third

위에건 node가 ul이 2셋트가 있는데, 두번째 노드에서 third가 추가 됬군요. 그래서 리액트는 감지를 잘해서 마지막 third 리스트만 추가할겁니다.

Duke
Villanova

Connecticut
Duke
Villanova

근데 위처럼 connecticut 같이 첫번째 node에서 두번째 node로 변경될때 가장 첫번째에 connecticut이 추가 됬죠? 그럼 react는 한개만 추가되었다는걸 인지 못하고 다 다시 랜더링 하나 봅니다. 그래서 퍼포먼스가 안좋죠.

Duke
Villanova

Connecticut
Duke
Villanova

그그문제점을 커버하기 위해 key라는 속성을 달면 배열에 맨처음에 동적으로 추가하든 뒤에 아니 중간에 삽입하든 간에 리액트는 key란게 있으니 똑똑해져서 duke랑 villanova는 리랜더링 안하고, 기존에걸 쓰고, duke만 추가할겁니다. 똑똑해졌죠. 전 이렇게 이해했어요.

Miyou Kim · Answer

//조커버그 감사합니다. 공식문서도 한번 읽어봐야겠네요! 올리신 예제를 보니까 이해가 잘가네요. 책

리액트 배열 컴포넌트 (성능관련)

2개의 답변

#key 목록