React + Material-UI: “Each child in a list should have a unique ‘key’ prop” 오류 해결
React와 Material-UI를 함께 사용하다가 렌더링 중 “Each child in a list should have a unique ‘key’ prop” 경고 메시지를 만나면 걱정하지 마세요. 이는 흔한 문제이며 쉽게 해결할 수 있습니다. 이 경고는 일반적으로 고유한 키 프로퍼티를 제공하지 않고 컴포넌트 목록을 렌더링 할 때 발생합니다.
경고 메시지는 다음과 같이 표시됩니다:
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `App`. See .. for more information.
in ListItemCustom (at App.js:137)
in App (created by WithStyles(App))
in WithStyles(App) (at src/index.js:7)
이 문제를 해결하려면 목록 안의 각 컴포넌트에 고유한 “key” 프로퍼티를 추가해야 합니다. 이 경우 Material-UI의 ListItem 컴포넌트가 경고를 일으키고 있습니다.
App 컴포넌트의 render 메서드 내부에서 이벤트를 매핑하고 ListItem 컴포넌트를 렌더링하는 루프 부분을 찾으십시오. 경고를 없애기 위해 각 ListItem 컴포넌트에 고유한 키를 할당하는 것이 중요합니다. 다음은 예시입니다:
<code class="language-javascript">// 업데이트된 render 메서드
render() {
let eventsList;
if (this.state.buyOrRelease === "buy") {
// 구매 로직 처리
} else {
eventsList = this.state.pages.map(page => (
<div key={page.id}>
<ListSubheader className={this.props.classes.listSubHeaderRoot}>{page.name}</ListSubheader>
{page.events.map(event => (
<ListItemCustom key={event.id} value={event} onHeaderClick={this.handleSort} />
))}
</div>
));
}
// 나머지 코드
}이 예시에서는 이벤트의 id 프로퍼티를 사용하여 고유한 키를 설정합니다. 각 아이템을 고유하게 식별하는 id나 다른 고유한 속성을 키로 사용하는 것이 중요합니다.
목록 내의 각 자식 컴포넌트에 고유한 키를 제공함으로써 React는 변경된 항목, 추가된 항목, 제거된 항목을 식별할 수 있습니다. 이는 성능을 향상시키고 동적 목록을 올바르게 렌더링하는 데 도움이 됩니다.
기억해야 할 점은 루프의 인덱스(예: {/* <ListItem key={index} ... */})를 키로 사용하는 것은 일반적으로 권장되지 않습니다. 항목을 추가, 제거 또는 재정렬할 때 예상치 못한 동작을 야기할 수 있습니다.
이 간단한 조정을 따라하면 누락된 키 프로퍼티에 대한 경고 메시지를 더 이상 표시하지 않을 수 있으며, React 컴포넌트를 Material-UI에서 원활하게 렌더링할 수 있습니다.
즐겁게 코딩하세요!
