[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fdevlog-juneby.vercel.app%2Fposts%2FTroubleShooting%2Freact-rerender-and-key-prop&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

# key prop? `key prop`은 `React`에서 특정 항목을 고유하게 식별할 수 있도록 도와주는 `prop`입니다. `key`를 적절히 활용한다면, 같은 뎁스에 위치한 형제 항목 사이의 고유하게 위치를 식별할 수 있어, 해당 렌더링 시점에 이전 렌더링의 `React` 컴포넌트를 재활용하는 방식으로 성능상 이점을 누릴 수 있습니다. 일반적으로 React를 사용한 프로젝트에서는 JSX 배열을 반환하는 경우, key prop을 반드시 사용하도록 컨벤션이 정해져있습니다. 공식문서 - [https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key) 아래와 같이 리스트를 리렌더링하는 코드를 통해 예시를 살펴보겠습니다. ### 1번 케이스 각각의 Item 컴포넌트에 유니크한 key prop을 주었을 때 ```tsx showLineNumbers {17,26} function shuffle(array: any[]) { const newArr = [...array].sort(() => Math.random() - 0.5); return newArr; } function App() { const [arr, setArr] = useState( Array.from({ length: 10 }, (_, idx) => ({ id: idx + 1, text: `${idx + 1}번째 항목입니다.`, })) ); return (

{arr.map(({ id, text }, idx) => ( ))}

); } function Item({ text }: { text: string }) { useEffect(() => { console.log("text : ", text); }, [text]); return

{text}

; } ``` 위 코드와 같이 각각의 리스트아이템(`Item` 컴포넌트)에 적절한 유니크한 key를 줄 경우, 상태가 변경되어 배열이 리렌더링 되었을 때(shuffle 클릭), 리스트아이템(`Item` 컴포넌트)을 새롭게 만드는게 아닌, 이전 렌더링 시점에 존재했던 리스트아이템(`Item` 컴포넌트)을 재활용하게 됩니다. 그리고 이는 26번 line의 `console.log`가 실행되지 않음으로서 알 수 있습니다. `Dependency Array`가 존재하는 `React.useEffect`는 컴포넌트가 마운트 되었을 때, `Dependency Array`에 속한 값이 변경되었을 때 실행됩니다. 26번 line의 `console.log`가 실행되지 않았기 때문에, 컴포넌트가 마운트 되지 않았다는 사실을 알 수 있습니다. withUniqueKeyGif

### 2번 케이스 각각의 Item 컴포넌트에 배열의 index를 key prop으로 주었을 때 ```tsx showLineNumbers {17, 26} function shuffle(array: any[]) { const newArr = [...array].sort(() => Math.random() - 0.5); return newArr; } function App() { const [arr, setArr] = useState( Array.from({ length: 10 }, (_, idx) => ({ id: idx + 1, text: `${idx + 1}번째 항목입니다.`, })) ); return (

{arr.map(({ id, text }, idx) => ( ))}

); } function Item({ text }: { text: string }) { useEffect(() => { console.log("text : ", text); }, [text]); return

{text}

; } ``` 위 코드와 같이 각각의 리스트아이템(`Item` 컴포넌트)에 배열의 index를 key로 줄 경우, 상태가 변경되어 배열이 리렌더링 되었을 때(shuffle 클릭), 이전 위치와 같은 위치에 같은 내용의 컴포넌트가 렌더링 되는게 아닌 이상, 컴포넌트를 새롭게 만들게 됩니다. 그리고 이는 26번 line의 `console.log`가 실행됨으로서 알 수 있습니다. withIndexKeyGif

# 이슈1 - 조건부 useEffect 로직 실행 발생했던 첫 번째 이슈는 조건부 useEffect 로직 실행이었습니다. 이슈 상황때 발생했던 데이터는 아래와 같은 형태입니다. ```ts const CATEGORY_LIST = ["category1", "category2", "category3"]; const COLOR_LIST = ["color1", "color2", "color3"]; const PRODUCT_LIST: Record = { "category1&color1": ["product1", "product2"], "category1&color2": ["product2", "product3"], "category1&color3": ["product3", "product4"], "category2&color1": ["product4", "product5"], "category2&color2": ["product5", "product6"], "category2&color3": ["product6", "product7"], "category3&color1": ["product7", "product8"], "category3&color2": ["product8", "product9"], "category3&color3": ["product9", "product10"], }; ``` 위 데이터는 카테고리, 컬러 목록이 존재하고 선택된 카테고리와 컬러에 따라서 상품이 달라지는 데이터입니다. 위 데이터를 표현하는 코드는 아래와 같습니다. ```tsx showLineNumbers {24-26} function CategoryChip({ name, onClickCategory, }: { name: string; onClickCategory: (category: string) => void; }) { return ( ); } function ColorChip({ name, onClickColor, }: { name: string; onClickColor: (color: string) => void; }) { return ; } function ProductCard({ name }: { name: string }) { useEffect(() => { console.log("name : ", name); }, [name]); return

product : {name}

; } function App() { const [selectedData, setSelectedData] = useState({ category: INITIAL_CATEGORY, color: INITIAL_COLOR, }); const products = getTargetProducts(selectedData.category, selectedData.color); return (

카테고리

{CATEGORY_LIST.map((category) => ( setSelectedData((prev) => ({ ...prev, category })) } /> ))}

컬러

{COLOR_LIST.map((color) => ( setSelectedData((prev) => ({ ...prev, color })) } /> ))}

상품

{products.map((product) => ( ))}

); } ``` 위 코드에서 카테고리 또는 컬러를 클릭해 리렌더링 될 경우, 25 line의 `console.log`는 아래와 같은 경우에 조건부로 실행됩니다. - 이전 렌더링 시점에 존재했던 `product`가 현재 렌더링 시점에 존재하지 않는 경우 - 이전 렌더링 시점에 1,2번 `product`가 존재하고 현재 렌더링 시점에는 2,3번 `product`가 존재 - 3번 `product`의 `useEffect`만 실행되고 `console.log`가 실행된다. rerenderWithUniqueKey

이는 위에서 살펴보았듯, 같은 key를 사용하기 때문에 컴포넌트를 새롭게 만들지 않고 재사용했기 때문입니다. 그런데, 만약 위와 같은 케이스에서 카테고리가 변경되었을때는 25번 line의 `console.log`를 실행시키지 않아야 하고, 컬러가 변경되었을때는 25번 line의 `console.log`를 실행시켜야 한다면 어떻게 해야할까요? 일반적으로는 `useEffect`의 `Dependency Array`에 선택된 컬러를 추가해 구현할 수 있습니다. ```tsx function ProductCard({ name, selectedColor, }: { name: string; selectedColor: string; }) { useEffect(() => { console.log("name : ", name); }, [name, selectedColor]); return

product : {name}

; } ``` 하지만 이미 만들어진 `Custom Hook`을 사용하거나 라이브러리에서 제공하는 `Hook`을 사용하는 경우 임의로 `Dependency Array`에 값을 추가할 수 없습니다. 이럴때는 `React`의 `key props`를 사용해 컴포넌트를 강제로 다시 만들도록 할 수 있습니다. ```tsx function App() { const [selectedData, setSelectedData] = useState({ category: INITIAL_CATEGORY, color: INITIAL_COLOR, }); const products = getTargetProducts(selectedData.category, selectedData.color); return (

카테고리

{CATEGORY_LIST.map((category) => ( setSelectedData((prev) => ({ ...prev, category })) } /> ))}

컬러

{COLOR_LIST.map((color) => ( setSelectedData((prev) => ({ ...prev, color })) } /> ))}

상품

{products.map((product) => ( ))}

); } ``` 리스트 아이템인 `ProductCard` 컴포넌트의 `key prop`에 선택된 컬러를 추가해, 컬러가 변경되었을 때 컴포넌트를 재활용이 아닌 생성하도록 만들어 `Mount` 로직을 실행되도록 만들었습니다. rerenderWithColorKey

어떻게보면 `useEffect`의 `Depedency Array`에 값을 직접 추가하는게, 컴포넌트를 다시 만들지 않고 재활용하기 때문에 성능상 좋고 직관적이라고 생각할 수 있지만, `key prop`을 사용한다면 컴포넌트 내부의 로직을 수정하지 않아도 되며, 컴포넌트에서 굳이 몰라도 되는 데이터를 `props`로 넘기지 않아도 되기 때문에 괜찮다고 생각합니다.
# 이슈2 - MasonryGrid UI 깨짐 현상 두 번재 이슈는 라이브러리를 이용해 리스트 UI를 그릴 때, UI가 깨지는 현상이었습니다. 이번 프로젝트에서는 `@egjs/react-infinitegrid` 라는 라이브러리에서 제공하는 `MasonryInfiniteGrid` 컴포넌트를 이용해 지그재그UI(`MasonryGrid UI`)를 구현했었고, 대략 아래와 같은 구조였습니다. ```tsx {productList?.map((product, index) => ( ))} ``` 라이브러리의 직접적인 소스코드를 살펴보지는 못했지만, `Chrome` 요소탭을 보았을 때, 리스트아이템 컴포넌트(`ProductCard`)가 `Mount`된 이후 절대위치(`position: absolute`)를 계산해, 위치시키는 방식으로 구현되어있다고 판단했습니다. 그리고 위에서 보았던 카테고리 컬러 선택에 따라 상품(`productList`)가 달라지는 구조가 사용되었습니다. 이때 만약 이전 렌더링 시점에 존재했던 상품목록과 현재 렌더링 시점에 존재하는 상품목록 중 겹치는 상품이 있다면 `MasonryGrid UI`가 깨지는 현상이 발생했습니다. 이 역시 위와 같이 리스트가 변경되었지만 이전 렌더링 시점의 컴포넌트를 그대로 가져와 사용해, 로직이 실행되지 않아 발생되었던 문제로 파악되었고, 매 렌더링 시점에 이전 렌더링 시점과 다른 `Key`를 가지도록 만들어 해결할 수 있었습니다. ```tsx {4,5} {productList?.map((product, index) => ( ))} ```
# Reference - [https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)

React 리스트 리렌더링과 key prop 관련 Issue 해결하기