카테고리 없음
[ReactJS] To Do List - 배열의 요소 가져오기- with .map
mswait
2022. 3. 10. 23:29
<hr> horizontal rule
reactJS를 잘하는 개발자라는 건 JavaScript을 진짜 잘하는 개발자라는 의미이다.
.map 은 배열에 함수를 넣게 해준다. 그리고 그 함수는 배열의 모든 요소에 적용되게끔 해준다. 그리고 .map() 에서 return 무엇이던 간에 새로운 배열의 요소로 들어가게 된다.
모든 요소에 대해 실행된다.(그렇기에 요소의 개수만큼 반복될 것이다)
그리고 어떠한 값이건 간에 그 함수에서 return 해준 값이 배열의 요소로 들어가게 될 것이다.
map 은 하나의 arrary 안에 있는 item,element를 내가 원하는 무엇이든 간에 것으로 바꿔주는 역할을 하기 때문이다. 그리고 새로운 array를 리턴해주기 때문이다.
함수가 배열의 각 원소를 한번씩 거쳐가면서 실행될 것이다.
import { useState, useEffect } from "react";
function App() {
const [toDo, setToDo] = useState("");
const [toDos, setToDos] = useState([]);
const onChange = (event) => {
return setToDo(event.target.value);
};
const onSubmit = (event) => {
event.preventDefault();
if (toDo === "") {
return;
}
setToDos((currentArray) => [toDo, ...currentArray]);
setToDo("");
};
return (
<div>
<h1>My To Dos ({toDos.length})</h1>
<form onSubmit={onSubmit}>
<input
onChange={onChange}
value={toDo}
type="text"
placeholder="Write your to do..."
/>
<button>Add To Do</button>
</form>
<hr />
<ul>
{toDos.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default App;
37줄 만에 to - do list를 작성할 수 있었다. Vanilla JavaScript 였다면 html, js 파일을 따로 하여야 했을텐데
React 에서는 한곳에서 다 작성할 수 있었다.