[React] 컴포넌트 반복

리액트 프로젝트에서 반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아보자.

자바스크립트 배열 객체 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다.

데이터 배열을 컴포넌트 배열로

IterationSample.js

import React from "react";

const IterationSample = () => {
  const names = ["눈사람", "얼음", "눈", "바람"];
  const nameList = names.map((name) => <li>{name}</li>);
  return <ul>{nameList}</ul>;
};

export default IterationSample;

문자열로 구성된 배열을 선언한 뒤 그 배열 값을 이용하여 JSX 코드로 된 배열을 생성한 후 표현한다.
"key" prop이 없다는 경고 메시지를 확인할 수 있다.

Key

컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 확인하기 위해서 사용.
key를 통해서 변화를 더욱 빠르게 알아낼 수 있다.

Key 설정

언제나 유일한 값을 설정해야 한다.

IterationSample.js

const nameList = names.map((name, index) => <li key={index}>{name}</li>);

고유값이 없을 때만 index 값을 key로 해야한다.

동적인 배열 렌더링과 Key 설정

데이터 추가 기능

IterationSample.js

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

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

export default IterationSample;

onChange 함수를 통해서 inputText 상태를 계속해서 업데이트 해준다.
onClick 함수에서 concat을 이용해서 새로운 항목이 추가된 배열을 만들고 setNames를 통해서 names 상태를 업데이트 한다.

배열에 항목을 추가할 때 push를 쓰지 않은 이유

리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 한다. 이를 불변성 유지라고 한다.
불변성 유지를 해주어야 나중에 리액트 컴포넌트의 성능이 최적화할 수 있다.

데이터 삭제 기능

IterationSample.js

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>
));

리스트 요소를 더블클릭했을 때 해당 요소가 삭제되도록 만들었다.
더블클릭할 때 name의 id값을 onRemove 함수의 파라미터로 보내서 해당 id를 제외한 배열로 상태를 업데이트하도록 했다.
filter를 이용해서 파라미터로 넘어온 id값을 가진 요소를 제외할 수 있다.