[React] map과 filter를 통한 배열 관리

// 리액트를 다루는 기술 6장 컴포넌트 반복

 

반복되는 내용을 효육적으로 보여주고 관리하는 방법을 배워보겠음

 

map 함수

arr.map(callback, [thisArg])

• callback: 새로운 배열의 요소를 생성하는 함수 ( 필요한 파라미터는 다음 세 가지)
  • currentValue: 현재 처리하는 요소
  • index : 현재 처리하고 있는 요소의 index 값
  • array: 현재 처리하고 있는 원본 배열
• thisArg(선택항목) : callback 함수 내부에서 사용할 this레퍼런스

간략히 말해서 위의 문법으로 예시를 들면

arr1 = arr.map(callback)이란 arr이라는 배열에 callback함수를 적용시킨 결과값을 arr1이라는 배열로 선언하겠다~~

요런 뜻이다.

 

import React, {useState} from 'react';

const IterationSample = () => {
    const [names, setNames ] = useState([
        {id : 0, text: '짱구'},
        {id : 1, text: '유리'},
        {id : 2, text: '철수'},
        {id : 3, text: '맹구'},
        {id : 4, text: '훈이'},
    ]);
    const [nextId, setNextId] = useState(5); // 새로운 항목을 추가할 때 사용할 id
    const [inputText, setInputText] = useState(''); // 새로운 항목을 추가할 때 사용할 text
    
    const onChange = e => setInputText(e.target.value);
    const onClick = () => {
        alert(inputText + nextId);
        const nextNames = names.concat({
            id: nextId,
            text:inputText
        });
        // 배열에 새 항목을 추가할 때 사용
        // nextID와 inputText가 추가된 배열 생성
        setNextId(nextId + 1); // 다음을 위해 미리 더해둠
        setNames(nextNames); // names 새로 할당
        setInputText(''); // inputText 비워줌

    };

    const onKeyPress = e => {
        if (e.key === 'Enter') {
            onClick();
        }
    };
    const nameList = names.map(name => 
    <li key = {name.id}> {name.text}</li>)
    return (
        <div>
            <input 
                value = {inputText}
                onChange = {onChange}
                placeholder = '짱구의 등장인물'
                onKeyPress={onKeyPress}
            />
            <button onClick = {onClick}>추가</button>
            <ul>{nameList}</ul>
        </div>
             
    )
}

export default IterationSample;

map 함수를 이용해서 새 배열을 만들어 보여주는 코드를 짰다(이건 책 참조)

 

이제 삭제기능은 직접 구현해 볼거임!

onClick을 또 사용해야하기 때문에 기존에 있던 onClick함수명을 appendName으로 바꿨다.

 

1️⃣ nameList에 x버튼을 만들어 주고 onClick이벤트를 활성화 시킨다. ( 함수명을 deleteName이라고 하겠음)

     deleteName에는 삭제될 name의 id값을 찾아 삭제해주고 배열을 다시 할당해주는 작업을 할 것이다.

    const nameList = names.map(name => 
            <li key = {name.id}> 
                {name.text} 
                <button id = {name.id} onClick = {deleteName}>x</button> 
            </li>
    )

 

 

2️⃣ filter함수를 통해 해당 이벤트의 id값이 name의 id와 같다면 제외하고 새로운 배열을 만들어준다.

     그리고 새 배열의 id값을 for문을 통해 바꿔주었다.

    const deleteName = e => {
        const newNames = names.filter(name => name.id !== parseInt(e.target.id))
        // e.target.id의 자료형은 정수형이 아니므로 int형으로 바꿔줌
        for (var i = 0; i < newNames.length ; i ++) {
            newNames[i].id = i
        }
        
        setNames(newNames);
        
    }

 

3️⃣ deleteName에서 배열 id값을 재할당 해주었기 때문에 기존에 설정했던 nextId에 혼동이 생긴다.

     그래서 초기 값을 배열의 길이만큼으로 바꿔주었다.

const [nextId, setNextId] = useState(names.length);

완성