🤯 리액트 컴포넌트의 반복과 배열 내장 함수 Map() 알아보기

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

arr.map(callback, [thisArg])

이 함수의 파라미터는 이와 같다.

callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지다.

1. currentValue : 현재 처리하고 있는 요소
2. index : 현재 처리하고 있는 요소의 인덱스 값
3. array : 현재 처리하고 있는 원본 배열

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

---

📌 코드 한 페이지로 배열 내장 함수 (map, filter, concat) 알아보기

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;

• filter : 불변성을 유지하면서 배열의 특정 항목을 지워준다.
• push : 기존 배열 자체를 변경해준다.
• concat : 새로운 배열을 만들어 준다.