리액트 컴포넌트의 반복

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

arr.map(callback, [thisArg])

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

컴포넌트 배열을 렌더링할 때는 key값 설정에 항상 주의해야합니다. 또 key 값은 언제나 유일해야 합니다. 중복이 된다면 오류가 발생할 겁니다. 마땅한 key값이 없다면 map의 index를 사용해도 되지만 권장하지는 않습니다. 가급적 key값으로 사용될만한 데이터를 사용하세요

 

상태안에서 배열을 변형할 때는 배열에 직접 접근하여 숮어하는 것이 아니라 concat, filter등의 배열 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 한다는 점을 명심하세요.

import React, { useState } from "react";

const IterationSample = () => {
  //const names = ["눈사람", "얼음", "눈", "바람"];
  //const nameList = names.map(name, index => <li key={index}>{name}</li>);
  
  const [names, setNames] = useState([
    { id: 1, text: "눈사람" },
    { id: 2, text: "불꽃" },
    { id: 3, text: "나무" },
    { id: 4, text: "태양" }
  ]);
  const [InputText, setInputText] = useState("");
  const [nextId, setNextId] = useState(5);

  const onChage = 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 namesList = names.map(name => (
    <li key={name.id} onDoubleClick={() => onRemove(name.id)}>
      {name.text}
    </li>
  ));

  return (
    <>
      <input value={InputText} onChange={onChage} />
      <button onClick={onClick}>추가</button>
      <ul>{namesList}</ul>
    </>
  );
};

export default IterationSample;

 

 

출처: 리액트를 다루는 기술