[React] map()함수

[keyword]
map함수, 배열 반복, 컴포넌트 반복

✔️ map() 메서드: 자바스크립트 배열의 내장 함수

배열 내의 모든 요소 각각에 대하여 주어진 함수(callback 함수)를 한번씩 순서대로 호출.
호출한 결과(callback 함수의 반환값)를 모아 새로운 배열을 반환함.

callback 함수는 호출될 때, 3개의 인수를 전달받음.
1. 처리할 현재(대상) 요소
2. 처리할 현재(대상) 요소의 인덱스
3. map을 호출한 원본 배열

---

기본 사용법

• 배열 안의 모든 자료에 똑같은 작업을 하나씩 시켜주고 싶을 때 예시 ⬇️

const numbers = [1, 4, 9];
const doubles = numbers.map(function(num) {
  return num * 2;
});


// 화살표 함수 사용
const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

콜백 함수 소괄호 안에 파라미터를 아무 이름(위 예시에선 num)이나 입력해주면, 이 파라미터는 numbers라는 배열 안에 있던 모든 자료를 하나씩 저장 -> 출력해 줌, 그리고 num에 원하는 작업을 시켜주면 됨.

---

반복되는 Component 렌더링하기

1) 배열을 활용한 기본 예시 ⬇️

const Sample = () => {
  const names = ["자", "이것은", "예시", "입니다"];
  const nameList = names.map((name) => <li>{name}</li>);

  return <ul>{nameList}</ul>;
};

2) 부모 컴포넌트에서 배열의 고유값을 만들고, 자식 컴포넌트에서 렌더링

• App.js에서 state로 notes 배열의 고유값을 만들고
  NoteList.js에서 <Note />컴포넌트를 반복적으로 렌더링하는 예시 ⬇️

//App.js
const [notes, setNotes] = useState([
    {
      id: nanoid(),
      text: "first note!",
      date: "27/09/2021"
    },
    {
      id: nanoid(),
      text: "second note!",
      date: "28/09/2021"
    },
    {
      id: nanoid(),
      text: "third note!",
      date: "30/09/2021"
    }
]);


//NoteList.js
const NoteList = ({ notes }) => {
  return (
    <div>
      {notes.map((note) => (
          <Note 
            id={note.id}
            text={note.text}
            date={note.date}
          />
      ))}
    </div>
  );
};

---

참고자료:
[1]https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map
[2]https://lktprogrammer.tistory.com/121
[3]https://chanhuiseok.github.io/posts/react-8/