728x90
반응형
목록 추가시, push를 하면 안되고,
concat 을 사용한다는 게 중요.
import React, { useState } from 'react';
function For2(props) {
const [fruitList, setFruitList] = useState(["딸기", "배", "사과", "포도", "수박", "망고", "오렌지"]);
const [fruit, setFruit] = useState("");
//모던스크리브가 배열에 forEach, map, reduce 함수를 추가하고
//forEach 배열의 요소마다 출력과 관련된 함수를 매개변수로 전달
//map은 매개변수로 콜백함수 - 반환값이 있는 콜백함수
const onChange = (e) => {
setFruit(e.target.value);
}
const goAppend = () => {
// push() 를 사용하면, 자바스크립트가 새로 배열을 만들어서 추가시키고 원래건 삭제 시키는 방법
// 그런데, state 의 배열의 값을 바꾸면 안된다.
setFruitList(fruitList.concat(fruit));
setFruit("");
}
return (
<div>
<h1>과일목록</h1>
<input type="text" onChange={onChange} value={fruit}/>
<button type="button" onClick={goAppend}>추가하기</button>
<table>
{
fruitList.map( (item, index) => {
return (
<tr key={index}>
<td>{index}</td><td>{item}</td>
</tr>
)
})
}
</table>
</div>
);
}
export default For2;
728x90
반응형
'IT > React' 카테고리의 다른 글
JSON 형태로 데이터 저장하기 (0) | 2022.09.23 |
---|---|
useEffect() 함수 (0) | 2022.09.23 |
For루프 예제 (0) | 2022.09.23 |
props, useState, 계산기 예제 (0) | 2022.09.23 |
useState 함수 사용예 (0) | 2022.09.23 |
댓글