[리액트를 다루는 기술 6장] 컴포넌트 반복

6.1 자바스크립트 배열의 map() 함수

---

arr.map(callback, [thisArg])

- callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지
	- currentValue: 현재 처리하고 있는 요소
    - index: 현재 처리하고 있는 요소의 index 값
    - array: 현재 처리하고 있는 원본 배열
    
-thisArg(선택항목): callback 함수 내부에서 사용할 this 레퍼런스 

const numbers = [1, 2, 3, 4, 5];
const result = numbers.map((num) => num * num);

result = [1, 4, 9, 16, 25];

6.2 데이터 배열을 컴포넌트 배열로 변한하기

---

const names = ['snowman', 'ice', 'snow', 'wind'];
const nameList = names.map((name) => <li>{name}</li>);
return <ul>{nameList}</ul>

6.3 key

---

• 리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다. key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있어 쓰는 것을 권장한다.

• key 값은 언제나 유일해야 하며 데이터가 가진 고윳값을 key 값으로 설정해야 한다. 고유한 값이 없을 때만 index를 key 값으로 설정해야 한다. index 값이 key로 설정되면 배열이 변경될 때 효율적으로 리렌더링 하지 못한다.

6.4 정리

---

• 배열에 새 항목을 추가할 때 배열의 push 함수를 사용하지 않고 concat을 사용한다. push 함수는 기존배열을 변경하지만 concat은 새로운 배열을 만든다는 차이가 있기 때문이다.
• 리액트에서는 상태를 업데이트 할 때 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야한다. 이를 불변성 유지라고 하는데 이걸 해 주어야 리액트 컴포넌트의 성능의 최적화가 가능하다.

import React, { useState } from "react";

const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: "snowman" },
    { id: 2, text: "ice" },
    { id: 3, text: "snow" },
    { id: 4, text: "wind" },
  ]);
  const [inputText, setInputText] = useState("");
  const [nextId, setNextId] = useState(5);

  const onChange = (e) => setInputText(e.target.value);
  const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });
    setNextId(nextId + 1);
    setNames(nextNames);
    setInputText("");
  };

  const onRemove = (id) => {
    const nextNames = names.filter((name) => name.id !== id);
    setNames(nextNames);
  };

  const nameList = names.map((name) => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
  ));
  return (
    <>
      <input value={inputText} onChange={onChange} />
      <button onClick={onClick}>추가</button>
      <ul>{nameList}</ul>
    </>
  );
};

export default IterationSample;

6.5 정리

---

• 컴포넌트 배열을 렌더링할 때는 key 값은 언제나 유일해야 한다. 이것이 중복된다면 렌더링 과정에서 오류가 발생하게 된다.
• 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, filter 등의 배열 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 한다.