React에서 배열에 반응형으로 추가하기
배열에 요소를 반응형으로 추가하는 것을
작업해 봅시다. 예를 들어 목록
ul으로 출력되는 배열이 있다고
가정해 보겠습니다:
function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
const result = notes.map((note, index) => {
return <li key={index}>{note}</li>;
});
return <div>
<ul>
{result}
</ul>
</div>;
}
버튼을 만들어 클릭 시
배열 끝에 새 요소를 추가하여,
ul 태그 끝에 새로운
li가 추가되도록 하세요.
입력 필드와 버튼을 만드세요.
버튼을 클릭하면 입력 필드의 텍스트가
ul 태그의 끝에 새로운
li 태그로 추가되도록 하세요.