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

웹 애플리케이션을 만들다 보면 다음과 같이 반복되는 코드를 작성할 때가 있습니다.

반복적인 내용을 효율적으로 보여 주고 관리하는 방법을 알아보겠습니다.

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

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

문법

arr.map(callback, [thisArg])

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

key

리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용합니다.

key가 없을 때는 Virtual DOM을 비교하는 과정에서 리스트를 순차적으로 비교하면서 변화를 감지합니다.

하지만 key가 있다면 이 값을 사용하여 어떤 변화가 일어났는지 더욱 빠르게 알아낼 수 있습니다.

key 설정

key 값을 설정할 때는 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트props를 설정하듯이 설정하면 됩니다.
key 값은 언제나 유일해야 합니다.

EX) 게시물 번호를 key 값을 설정하는 예시

const articleList = articles.map(article => (
  <Article
     title={article.title}
     writer={article.writer}
     key={article.id}
/>
       );

고유 번호가 없을 경우에는 map 함수에 전달되는 콜백 함수의 인수인 index 값을 사용하면 됩니다.

import React from "react";

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

배열에 새 항목 추가할 때 concat

배열에 새 항목을 추가할 때 배열의 push 함수를 사용하지 않고 concat을 사용했는데요.

push 함수는 기존 배열 자체를 변경해 주는 반면, concat은 새로운 배열을 준다는 차이점이 있습니다.

리액트에서 상태를 업데이트할 때는 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 합니다. 이를 불변성 유지라고 합니다.

const onClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText,
    });