컴포넌트 리스트는 왜 필요한가 ❓
수 많은 데이터가 존재한다면? 하드 코딩을 해야할까?
그럴 땐 데이터를 map 메스드로 컴포넌트 리스트를 만드는 방법이 있다
아래 코드를 살펴보자
function Hello(props) {
const name = props.name;
const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const numArray = num.map((i) => (
<h1>
안녕,{name} {i}호야!
</h1>
));
return <div>{numArray}</div>;
}
function App() {
return <Hello name='지인' />;
}
export default App;
map() 메서드 : 주로 JSX 요소를 동적으로 생성할 때 사용된다
map 메서드를 활용하면 배열 데이터를 순회하면서 각 항목에 대한 JSX 요소를 생성할 수 있다
결과 화면을 보니 잘 나오는거 같지만 오류가 생겼다
🚨 key error
해당 에러는 이러하다 👉
각 자식 요소가 고유한 key 속성(prop)을 가져야 한다는 내용을 나타낸다
이 경고는 리액트에서 효율적인 업데이트와 재렌더링을 위해 요소들을 식별하기 위한 목적으로 사용되는 key 속성을 설정하지 않았을 때 발생하는데,
key 속성은 일반적으로 map 메서드와 함께 사용되며, 각 항목을 식별하기 위한 고유한 값으로 사용됩니다. key 속성을 지정함으로써 리액트는 각 요소의 변경을 효율적으로 추적하고 업데이트할 수 있습니다
어떤 요소에 변동이 있다면 그 요소만 새로 그려주기 위함이다
key가 없다면 하나의 요소가 변경이 되어도 array에 담긴 요소를 모두 다시 그려주게 된다
그래서 해결방법은 ❓
<h1 key={i}>
안녕,{name} {i}호야!
</h1>
map 메서드를 사용하여 컴포넌트를 동적으로 생성할 때 각 요소에 고유한 key 속성을 제공 해야한다는 것이다
리스트와 Key – React -> key 에 대해 자세히 알고가기
동일한 key 사용 가능하다..?
Key는 형제 사이에서만 고유한 값이어야 한다.
첫번째와 두번째인 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다
서로 다른 각각의 형제가 있다
map을 통해 생성되는 div 끼리 / li 끼리 형제가 된다
요소의 아이디가 한 페이지에서 고유한 것처럼 이 안에서만 고유하면 된다
