map, key prop

map

• 리액트에서 동적인 배열을 렌더링 할 때는 내장함수 map()을 사용한다.
• 배열이 고정적이지 않고 배열의 인덱스를 하나씩 조회하면서 렌더링하는 동적인 방법에 map()을 사용한다는 의미이다.
• 리액트에서 동적인 배열을 렌더링해야 할 때는 map을 사용하여 일반 데이터 배열을 리액트 엘리먼트 요소로로 이루어진 배열로 변환해서 리턴해주면 된다.

import logo from './logo.svg';
import './App.css';

function App() {
  const list = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      {list.map((item) => {
        return(
          <div>div 태그</div>
        );
      })}
    </div>
  );
}

export default App;

• 하지만 콘솔에 아래처럼 key라는 props가 없다고 나올 것이다.
• 리액트에서는 map을 사용해서 엘리먼트를 

• 이를 해결하기 위해 map을 통해 엘리먼트를 리턴해서 렌더링할 때 key라는 변하지 않고, 예상 가능하며, 유일한 prop을 사용한다!

---

key

• 가장 간단한 방법은 map에서 리턴하는 리액트 요소에 map 함수의 콜백함수의 두번째 인자인 리스트의 index 값을 넘겨주는 것이다!

import logo from './logo.svg';
import './App.css';

function App() {
  const list = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      {list.map((item, index) => {
        return(
          <div key={index}>div 태그</div>
        );
      })}
    </div>
  );
}

export default App;

key의 존재 이유

• 리렌더링을 하기 위해
• 이벤트를 처리하기 위해 - 이벤트 위임

---

 

key의 동작 원리

https://react.vlpt.us/basic/11-render-array.html