React(72) map()으로 input 추가 삭제하기

 

 

CRUD 를 그리다 보면 <input> 의 자유로운 추가 삭제 기능이 필요할 때가 있다.

비슷한 기능을 3번째 구현하면서, 잊지 않기 위해 기록으로 남겨본다.

 

---

 

React(72) map()으로 input 추가 삭제하기

 

 

1. Input 입력값이 들어갈 인터페이스 준비

interface InputItem {
  id: number;
  title: string;
}

 

 

2. 준비물 변수들 선언

일단 id 를 동적으로 추가해줄 변수(nextID) 와 input 배열을 담을 변수(inputItems) 를 선언한다.

const nextID = useRef<number>(1);
const [inputItems, setInputItems] = useState<InputItem[]>([{ id: 0, title: '' }]);

 

 

3. 추가 삭제 기능 구현 

두말하면 잔소리다. 추가 삭제 기능이다.

  // 추가
  function addInput() {
    const input = {			  // 새로운 인풋객체를 하나 만들고,
      id: nextID.current,		  // id 값은 변수로 넣어주고,
      title: '',			  // 내용은 빈칸으로 만들자
    };

    setInputItems([...inputItems, input]); // 기존 값에 새로운 인풋객체를 추가해준다.
    nextID.current += 1; 		   // id값은 1씩 늘려준다.
  }

  // 삭제
  function deleteInput(index: number) {    // 인덱스 값을 받아서
    setInputItems(inputItems.filter(item => item.id !== index)); // 인덱스 값과 같지 않은 애들만 남겨둔다
  }

 

 

4. onChange 이벤트 함수 구현 

<input> 이 동적으로 추가되고 그 배열 안에 실시간으로 값이 들어가야 하기 때문에 onChange 함수가 필요하다.

 function handleChange( 	// ↓ 이벤트 객체를 받고, 인덱스를 받자
    e: React.ChangeEvent<HTMLInputElement>, index: number
 ) {
    if (index > inputItems.length) return; // 혹시 모르니 예외처리
    
    // 인풋배열을 copy 해주자
    const inputItemsCopy: InputItems[] = JSON.parse(JSON.stringify(inputItems));
    inputItemsCopy[index].title = e.target.value; // 그리고 해당 인덱스를 가진 <input>의 내용을 변경해주자 
    setInputItems(inputItemsCopy);		  // 그걸 InputItems 에 저장해주자
  }

 

 

5. 이제 HTML 로 화면에 뿌려주자

 

3개까지 추가되도록 조건을 주었다.

{inputItems.map((item, index) => (
  <DIV_Label key={index}>
    <div>라벨{index}</div>
    <input
        type="text"
        className={`title-${index}`}
        onChange={e => handleTitleChange(e, index)}
        value={item.title}
    />

    {index === 0 && item.length < 4 && (
      <button onClick={addInput}> + </button>
    )}

    {index > 0 && item[index - 1] ? (
      <button onClick={() => deleteInput(item.id)}> - </button>
    ) : (
      ''
    )}
  </DIV_Label>
))}

 

 

결과화면

 

+ 버튼을 누르면  

 

새로운 input 창이 잘 나타난다. 추가 삭제도 가능하다