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

6장 컴포넌트 반복

• 자바스크립트 배열 map()함수
  • 문법
    • callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지이다.
      • currentValue : 현재 처리하고 있는 요소
      • index : 현재 처리하고 있는 요소의 index값
      • array : 현재 처리하고 있는 원본 배열
    • thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스
  • arr.map(callback,[thisArg])
• map함수를 활용한 컴포넌트 반복
• key
  • key 설정key 값은 언제나 유일해야 한다.
  • 단, 고유한 값이 없을 때만 index값을 key로 사용 → index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링 불가
  • key 값을 설정할 때는 map함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다.
  • 고유 id를 통한 key설정

  import React, { useState } from "react";
  
  const IterationSample = () => {
    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 nameList = names.map((name) => <li key={name.id}>{name.text}</li>);
  
    return <ul>{nameList}</ul>;
  };
  
  export default IterationSample;
  

  • 데이터 추가 구현

  import React, { useState } from "react";
  
  const IterationSample = () => {
    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 nameList = names.map((name) => <li key={name.id}>{name.text}</li>);
  
    const handleInput = (event) => setInputText(event.target.value);
  
    const handleClick = () => {
      let nextName = names.concat({
        id: nextId,
        text: inputText,
      });
  
      setNextId(nextId + 1);
      setNames(nextName);
      setInputText("");
    };
  
    return (
      <>
        <ul>{nameList}</ul>
        <input type="text" className="listInput" onChange={handleInput} />
        <button className="listBtn" onClick={handleClick}>
          addList
        </button>
      </>
    );
  };
  
  export default IterationSample;
  

  • 배열에 새 항목을 추가할 때 push함수가 아닌 concat을 사용concat은 새로운 배열을 만들어 준다.
  • pust는 기존 배열 자체를 변경
  💡 불변성 유지 : 리액트에서 상태를 업데이트 할 때 기존 상태를 그대로 두면서 새로운 값으로 상태를 설정해야 한다.
  • 데이터 제거 기능 → filter함수

  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 (
    <>
      <ul>{nameList}</ul>
      <input type="text" className="listInput" onChange={handleInput} />
      <button className="listBtn" onClick={handleClick}>
        addList
      </button>
    </>
  );
};

export default IterationSample;