인프런 커뮤니티 질문&답변

존경하는 그랩님

Warning: Each child in a list should have a unique "key" prop 오류 케이스에 대해서 조언좀 구할 수 있을까요?

1. ReactDOM.render 방식이 React 18에서 지원하지 않으면서 오류들을 수정했습니다.

//[AS-IS]
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')


//[TO-BE]
import * as ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>);

2. 다만 아래와 같은 오류들이 발생을 하였는데요.

3. 구글링에서 찾아보니 각 엘리먼트에 key값을 주는 것으로 해결하라고 하는데요.

   - 그렇다면 src > main > index.js 에서 각 엘리먼트들에 key 값을 설정해줘야 하나요?
   - 각 엘리먼트들에 map으로 되어있는 함수를 지우고.. (product, index) 형태를
   key={product.id}>{product.imageUrl}
   key={product.id}>{product.name} 형태로 바꾸어 주어야 하나요?
   - 조금 어렵게 느껴지네요. 해당 부분처럼 바꾸는게 맞는지 조금 조언 부탁드립니다.
   
   현재 제 깃 레파지토리 참조로 첨부드립니다. 도와주세요 ㅠㅠ
   https://github.com/promotionX/Grabmarket-clinet