#4 Component 반복

자바스크립트 map ( ) 함수

• 리액트 프로젝트에서 반복적인 컴포넌트를 렌더링할 때 "map 함수"를 사용
• map( ) 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성
• 문법 : array.map( callback( currentValue, index, array), [thisArg] )
  • callback 함수 : 새로운 배열의 요소를 생성하는 함수 
    • currentValue : 현재 처리하고 있는 요소
    • index : 현재 처리하고 있는 요소의 index 값
    • array : 현재 처리하고 있는 원본 배열
  • thisArg (선택항목) : callback 함수 내부에서 사용할 this 레퍼런스
• key : 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내기 위해 사용
  • key 값 설정시 map 함수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정
  • key값은 유일해야 함

 

동적 배열 렌더링 - 초기 상태 설정

import React, { useState } from 'react';

const DynamicArray = () => {
  const [names, setNames] = useState([
    { id: 1, text: 'kim' },
    { id: 2, text: 'lee' },
    { id: 3, text: 'park' }
  ]);
//   const [inputText, setInputText] = useState('');
//   const [nextId, setNextId] = useState(4);

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

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

export default DynamicArray;

 

동적 배열 렌더링 - 데이터 추가 기능 : 배열의 concat 메소드 활용

- concat 은 두 개의 문자열을 하나의 문자열로 만들어주는 역활을 하는 함수이며,

   입력값을 문자열 대신 배열을 사용하면 두 개의 배열을 하나의 배열로 만들어주는 역활도 하는 함

import React, { useState } from 'react';

const DynamicArray = () => {
  const [names, setNames] = useState([
    { id: 1, text: 'kim' },
    { id: 2, text: 'lee' },
    { id: 3, text: 'park' }
  ]);
  const [inputText, setInputText] = useState('default text');
  const [nextId, setNextId] = useState(4);

  const handleChange = e => {
    setInputText(e.target.value);
  };

  const handleClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText
    });
    setNames(nextNames);
    setNextId(nextId + 1);
    setInputText('');
  };

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

  return (
    <>
      <input value={inputText} onChange={handleChange}></input>
      <button onClick={handleClick}>add</button>
      <ul>{nameList}</ul>
    </>
  );
};

export default DynamicArray;

 

동적 배열 렌더링 - 데이터 삭제 기능 : 배열의 filter 메소드 활용

- filter 함수 : 지정된 조건에 맞는 요소들로 이루어진 새로운 배열 반환하는 함수

import React, { useState } from 'react';

const DynamicArray = () => {
  const [names, setNames] = useState([
    { id: 1, text: 'kim' },
    { id: 2, text: 'lee' },
    { id: 3, text: 'park' }
  ]);
  const [inputText, setInputText] = useState('default text');
  const [nextId, setNextId] = useState(4);

  const handleChange = e => {
    setInputText(e.target.value);
  };

  const handleClick = () => {
    const nextNames = names.concat({
      id: nextId,
      text: inputText
    });
    setNames(nextNames);
    setNextId(nextId + 1);
    setInputText('');
  };

  const handleRemove = id => {
    const filteredNames = names.filter(name => name.id != id);
    setNames(filteredNames);
  };

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

  return (
    <>
      <input value={inputText} onChange={handleChange}></input>
      <button onClick={handleClick}>add</button>
      <ul>{nameList}</ul>
    </>
  );
};

export default DynamicArray;