React) 6장 컴포넌트 반복

6️⃣.1️⃣ 자바 스크립트 배열의 map() 함수

map함수는 파라미터로 전달된 함수를 이용해 배열 내 각 요소를 원하는 규칙대로 변환후 새로운 배열로 반환한다.

arr.map(callback, [this Arg])

-callback : 새 배열을 생성하는 함수, 3가지

--currentValue : 현재 처리중인 요소

--index : 현재 처리중인 요소의 index

--arr : 현재 처리중인 원본 배열

-this.Arg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스

 

6️⃣.2️⃣ 데이터 배열을 컴포넌트 배열로 반환하기

key 값이 없이 배열을 랜더링 한다면, 에러가 발생한다.

 

6️⃣.3️⃣ Key

리액트에서 key는 컴포넌트 배열을 랜더링 했을때 어떤 원소에 변동이 있었는지 알아낼 때 사용된다.

 

6️⃣.3️⃣.1️⃣ key 설정

key 값을 설정할 때 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯 설정한다.

또한, key 값은 유일해야 한다. ➡ 데이터가 가진 고윳값을 key 값으로 설정한다.

  const namesList = names.map(name =>
    <li
      key={name.id}
      onDoubleClick={() => onRemove(name.id)}>{name.text}</li>);

위와 같이 map 함수에 전달되는 콜백함수의 index값을 이용한다.

 

 

 

6️⃣.4️⃣ 응용

동적인 배열을 랜더링 하는 것을 구현

index값을 key로 사용하면 리랜더링시 비효율적이니 고윳값을 만드는 법을 알아보자

 

 

데이터 추가-제거 기능을 추가한다

 

추가기능)

state 3개 추가하며 목록, input의 text, 목록의 ID를 추가

(input으로 입력된 정보를 push 대신 concat을 이용해 새로운 배열로 만드는게 좋다)

React는 상태 업데이트시 기존 상태를 그대로 두면서 새로운 값을 상태로 설정해야 함

이를 불변성 유지 라고 한다. 불변성 유지를 해주어야 리액트 컴포넌트 성능 최적화가 가능하다.

 

제거기능)

filter함수를 사용하고 더블클릭 이벤트(onDoubleClick)를 이용한다

import { 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);  //  새로운 값을 설정할 때의 Id값

  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 namesList = 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>{namesList}</ul>
    </>
  )
}

export default IterationSample;

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

//key설정 O
// const IterationSample = () => {
//   const names = [`눈사람`, `얼음`, `눈`, `바람`];
//   const nameList = names.map((name, index) => <li key={index}>{name}</li>);

//   return <ul>{nameList} </ul>;
// }

//filter함수를 이용한 데이터 제거 기능 예시
// const number = [1, 2, 3, 4, 5, 6];
// const biggerThanThree = number.filter(number => number > 3);  //  결과 : [4, 5, 6]
// const withOutThree = number.filter(number => number !== 3);   //  결과 : [1, 2, 4, 5, 6]

 

 

정리

반복되는 데이터 렌더링(map()활용)을 이용한 유동적인 배열 다루기

컴포넌트 랜더링시 key값 설정에 주의가 필요하다. 그리고 key값은 유일해야 한다.

상태 안에서 배열을 변경할 때 배열 내장 함수를 이용해 이를 새로운 상태로 성정해야 된다.