🤯 反応素子の繰返しとアレイ内蔵関数Map()について

JavaScript配列のmap()関数

arr.map(callback, [thisArg])

callback:新しい配列要素を作成する関数です。パラメータは3つあります。

thisArg(オプション):callback関数で使用されるこの例

📌 配列内蔵関数(map、filter、concat)を1ページのコードで理解する

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); 
    
    //👉이벤트 핸들링 e.target.value는 현재 DOM 값
    const onChange = e => setInputText(e.target.value);
    const onClick = () => { //클릭
        const nextNames = names.concat({
        👉//concat : 새로운 배열 만들어준다.
        👉//push : 기존 배열 자체를 변경해준다.
            id:nextId, 
            text:inputText  
        });
        
        👉클릭되고나면 nextId에 1추가, nextNames 이름으로 대체, setInputText 공백처리
        setNextId(nextId + 1);
        setNames(nextNames);
        setInputText(''); 
    };
    
    //👉filter : 불변성을 유지하면서 배열의 특정 항목을 지워준다. (배열 내장 함수)
    💓filter 사용하면 특정 원소만 제외시킬 수 있다.
    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>)); 
    return (

        <>
            <input value={inputText} onChange={onChange} />
            <button onClick={onClick}>추가</button>
            <ul>{nameList}</ul>
        </>
        
        )
}

export default IterationSample;