리액트 - 버튼으로 항목 추가 및 삭제

버튼 onClick 이벤트를 이용하여 버튼 클릭 시 항목이 추가 되거나 삭제를 구현 할 것이다.

 

1. 항목 추가

1. 배열에 담겨질 객체 상태를 정의한다.

import { useState } from 'react';

// inputValue에 기본 값을 담아 준다.
// 그냥 useState([])으로 배열만 생성해놓으면 초기에 들어가 있는 객체가 없어 아무 것도 보이지 않는다
const [inputValue, setInputValue] = useState([{}]);

위에 적힌 state를 통해 inputValue에 value 값이 담기고 setInputValue로 inputValue의 상태를 관리한다.

 

2. onClick 이벤트를 실행 할 함수를 생성한다.

const addContent = () => {
	setInputValue([...inputValue, {}])
}

addContent를 통해 이벤트가 실행 될 때 마다 setInputValue가 inputValue를 업데이트 해주기 때문에

inputValue = [{}];

에서

inputValue = [{}, {}];

이런 느낌으로 보면 된다.

 

3. jsx 본문에 map 을 활용하여 새로운 배열을 계속 생성해준다.

{
	inputValue.map((index)=> (
    	<div key={index}>Element</div>
    ))
}

 

 

위 코드에서는 당장 item 으로 객체 하나 하나를 분리 할 필요가 없어서 item으로 굳이 표시 하지 않았지만, 아마 저렇게 상태를 추가하는 이유가 서로 다른 객체로써 활용하기 때문일 거라고 예상하기 때문에 배열의 요소에 접근하여 따로 이벤트를 주고 싶다면 

.map((item, index) => (
))

형식으로 쓰기를 권하고 싶다.

 

2. 항목 삭제

1. delete 이벤트를 실행할 함수를 만든다.

const deleteElement = (index) => {
    const newInputValues = inputValue.filter((_, i) => i !== index);
    setInputValue(newInputValues)
}

 

filter 함수는 간단하게 말해서 조건에 해당하는 배열의 요소만 새로 배열로 만들어 반환하는 것으로 해당 코드를 해석하자면 

filter의 i(인덱스)가 아닌 것을 newInputValues에 배열 요소로 넣는 코드이다.

당연히 해당 i와 인덱스가 일치 한다면 자연히 새로운 newInputValue에 해당되지 않아 베열에 추가 되지 않고 사라진다.

 

2. 버튼에 delete 함수를 걸어준다.

<button type='button' onClick={() => deleteCategory(index)}>삭제</button>

 

3. 전체 코드

import {useState} from 'react';

const Ex = () => {
    const [inputValue, setInputValue] = useState([{}])

    const addContent = () => {
        setInputValue([...inputValue, {} ])
    }
    
    const deleteElement = (index) => {
        const newInputValues = inputValue.filter((_, i) => i !== index);
        setInputValue(newInputValues)
    }

    return (
        <div className="Ex">
            <button onClick={addContent}>addContent</button>
            {
                inputValue.map((index) =>(
                    <div key={index}>
                    	element
                        <button onClick={() => deleteElement(index)}>
                        	삭제
                        </button>
                    </div>
                ))
            }
        </div>
    )
}

export default Ex;