React와 Map function (약간의 key property 주저리)

너도알고 나도아는 Javascript의 map function 먼저 이해하기

map과 for loop의 차이점

const numbers = [0, 1, 2, 3, 4];

let newNumbers = [];

for (let i = 0; i < numbers.length; i++) {
	newNumbers.push(numbers[i] * 10);
}

//위의 for loop와 밑의 map function의 결과값은 같다!! map의 위대함이랑 ㅠㅠ

numbers.map((num) => {
  return num * 10;
})

numbers;

refactoring

numbers.map(num => num * 10);

아니 for loop쓸때는 저렇게나 긴 코드가 map으로는 한줄로 정리되는게
말이 되냐고요~~~ map 메쏘드 사랑해!!!! 💖

그럼 이제 React에서 map method를 사용해볼까나

import React from 'react';

const users = [
  { id: 1, name: 'Leanne Graham' },
  { id: 2, name: 'Ervin Howell' },
  { id: 3, name: 'Clementine Bauch' },
  { id: 4, name: 'Patricia Lebsack' }
];


export default class App extends React.Component {
  render() {
	const renderedUsers = users.map(({ id, name }) => {
    	return <li key={id}>{name}</li>;
    });    
    
    return (
        <ul>
      	  {renderedUsers}
      	</ul>
    );
  }
}

// 결과값

▪ Leanne Graham
▪ Ervin Howell
▪ Clementine Bauch
▪ Patricia Lebsack

React에서 Map 사용하기2

const ImageList = props => {
  const images = props.images.map ((image) => {
    return <ImageCard key={image.id} image={image} />;
  });
  
  return <div className="image-list">{images}</div>
};

여기서 props.images.map이라고 바로 하지 않고 또 다른 변수에 선언해주는 이유는, 맨 마지막에 return할때 map으로 돌린 것들의 결과값을 사용해야하기 때문. 변수에 선언안해주면 결과값들이 민들레 홀씨처럼 홀홀 날아가버린다구요..!

참고: id가 있는 데이터를 사용하는 경우에는 서로 겹치지 않고 데이터를 관리하기 쉽게key property를 꼭 넣어주면 좋다.
key property는 가장 위에있는 div에 넣어준다. 만약 styling할때 맨 위에 있는 div는 쓸모없이 자리만 차지하고 있다면
<React.Fragment key={item.title}>
이렇게 div를 React.Fragment로 바꾸어서 키값을 넣어주면 보이지 않게 된다.

-> 이걸 왜 map관련 포스팅에서 떠들고있는건지 모르겠지만 어흑흑
예시안에 나온 코드들을 설명하다가 부연설명을 또 덧붙이다가..! 에라 모르겠다 그냥 다 여기에 써버리자~~~! 하고 씁니다 😂