5-4. map응용 (state사용)

map을 통한 데이터 추가기능 구현하기

Hooks중 하나인 useState를 사용하여 상태를 설정하겠습니다.

세가지 state를 사용할 것입니다.

1. 데이터 배열
2. 텍스트를 입력할 수 있는 input의 state
3. 데이터 배열에서 새로운 항목을 추가할 때 사용할 고유 id를 위한 state입니다.

// IterationSample.js
import { useState } from 'react';

const IterationSample = () => {
// 1. 데이터배열
    const  [names, setNames] = useState([
        { id: 1, text: '눈사람' },
        { id: 2, text: '얼음' },
        { id: 3, text: '눈' },
        { id: 4, text: '바람' }
    ]);

// 2. input의 state
    const [inputText, setInputText] = useState('');

// 3. 새로운 항목을 추가할 때 사용할 id
    const [nextId, setNextId] = useState(5);

// 4. input에 기입한 text에 따라 inputText값을 변경 
    const onChange = e => {
        setInputText(e.target.value);
        console.log(e.target.value);
    };

// 5. 클릭하여 input값을 추가해줄 함수 생성
    const onClick= () => {
        const nextNames = names.concat({
            id: nextId, // nextId값을 id로 설정하고
            text: inputText
        });
        setNextId(nextId + 1); //nextID값에 1을 더해준다
        setNames(nextNames); // names 값을 업데이트 한다.
        setInputText(''); // inputText를 비운다.
    };

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

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

export default IterationSample;

결과

크리스마스를 입력하고 버튼을 누를시 list에 크리스마스가 추가되는 것을 볼 수 있습니다.

데이터 제거 기능 구현하기

이번에는 각 항목을 더블클릭했을 때

해당 항목이 화면에서 사라지는 기능을 구현 해 보겠습니다.

불변성을 유지하면서 업데이트 해주어야 하며,

불변성을 유지하면서 배열의 특정 항목을 지울때는 배열의 내장함수 filter를 사용합니다.

// IterationSample.js
import { useState } from 'react';

const IterationSample = () => {
// 1. 데이터배열
    const  [names, setNames] = useState([
        { id: 1, text: '눈사람' },
        { id: 2, text: '얼음' },
        { id: 3, text: '눈' },
        { id: 4, text: '바람' }
    ]);

// 2. input의 state
    const [inputText, setInputText] = useState('');

// 3. 새로운 항목을 추가할 때 사용할 id
    const [nextId, setNextId] = useState(5);

// 4. input에 기입한 text에 따라 inputText값을 변경 
    const onChange = e => {
        setInputText(e.target.value);
        console.log(e.target.value);
    };

// 5. 클릭하여 input값을 추가해줄 함수 생성
    const onClick= () => {
        const nextNames = names.concat({
            id: nextId, // nextId값을 id로 설정하고
            text: inputText
        });
        setNextId(nextId + 1); //nextID값에 1을 더해준다
        setNames(nextNames); // names 값을 업데이트 한다.
        setInputText(''); // inputText를 비운다.
    };
    
// 6. 삭제하는 함수
    const onRemove = id => {
        const nextNames = names.filter(names =>names.id !== id);
        setNames(nextNames);
    }

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

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

export default IterationSample;

filter 함수는 설정한 조건에 따라 배열을 필터링해주는 함수입니다.

따라서 onRemove 함수는 !== 라는 조건에 따라

(더블클릭해서)선택하지 않은 id만 filter되어 선택된 배열을 제거하고
남은 배열을 setNames하는 함수입니다.