반응형
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 창이 잘 나타난다. 추가 삭제도 가능하다
반응형
'React' 카테고리의 다른 글
React - useState 동작원리 이해하기 (0) | 2022.06.15 |
---|---|
React- 가상돔(Virtual DOM) 이해하기 (0) | 2022.06.11 |
React(71) 마우스 이벤트로 호버시 애니메이션 넣기 (0) | 2022.05.22 |
React(70) react-date-range 캘린더 라이브러리 사용하기 (0) | 2022.05.18 |
React(69) TypeScript - 객체 속 객체의 반복문 사용하기 (0) | 2022.05.15 |
댓글