[React] map

map

각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수

함수는 원본 자료형을 변형시키지 않아서 새로운 변수에 담아서 사용

function App() {
	let [글제목, 글제목변경] = useState(['논산', '강남', '동대문']);
    return (
    	{
        	글제목.map((a)=>{
            	return (
                <div className="list">
                	<h3> {a} </h3>
                    <hr/>
                </div>)
            )
        }
    )
}

 

map() 함수 기본 사용

const number = [1, 2, 4, 6, 20, 100];
const result = number.map((newNumber) => newNumber * newNumber);
console.log(result);

map() 함수를 통해서 각 값 * 값을 return하여 console 배열객체를 반환

 

import React, { Component } from 'react';

class MyComponent extends Component
{    
    render(){

        const titles = ["1학년", "2학년", "3학년", "4학년"]
        const titleList = titles.map((title) => (<li>{title}</li>));

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

export default MyComponent;

반복적으로 <li> 태그로 구성된 요소를 map() 함수를 통해 JSX코드로 된 배열을 생성, 반환하는 MyComponent

React에서는 컴포넌트를 렌더링할 때, key값이 설정되지 않으면 가상 DOM의 속도가 느려짐.

 

Map() 함수의 형태

arr.map(callback, [thisArg])

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

 

import React, { Component } from 'react';

class MyComponent extends Component
{    
    render(){

        const title = ["1학년", "2학년", "3학년", "4학년"]
        const titleList = title.map((menu, index) => (<li key={index}>{menu}</li>));

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

export default MyComponent;

요소에 key값을 설정하는 방식은 Component에 props를 설정하는 것과 같이

 

---

 

maps 요소 추가 및 삭제 기능 구현

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);	//names 값을 업데이트
    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;

onClick 함수를 이용해서 nextId 와 nextNames 값을 업데이트

onRemove 함수를 통해서 목록 태그를 더블클릭하게 되면 삭제되게 끔 진행