예전에 바닐라JS로 todo list를 만든 적이 있다.
https://velog.io/@jasmine0714/%EB%B0%94%EB%8B%90%EB%9D%BCJS
HTML, CSS, Javascript 왔다갔다 하느라고 아주 진땀뺐었다.
당시에는 리액트를 몰랐으니 다 만들고 그렇게 뿌듯할 수 없었다.
그런데 오늘의 나,, 리액트로 Todo list만든 오늘의 나,, 굉장히 허무하다.
코드가 이렇게 간단해지다니!
import { useState } from "react";
function App() {
const [toDo, setToDo] = useState("");
const [toDos, setToDos] = useState([]);
const onChange = (event) => setToDo(event.target.value);
const onSubmit = (event) => {
event.preventDefault();
if (toDo === "") {
return;
}
setToDos((currentArray) => [toDo, ...currentArray]);
setToDo("");
console.log(toDos);
console.log(toDos.map((item, index) => <li key={index}>{item}</li>));
};
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;
바닐라JS 하다가 리액트JS 하면 신세계라는 카더라는 이럴 때일 수록 와닿는다.
물론 아직 리액트JS를 배워가는 단계이므로 더 익숙해져야 하지만, 익숙해지면 리액트 파워를 숨쉬듯 체험할 수 있을 것 같아 기대가 된다!
중요 뽀인트를 정리해보자.
⭐️
setToDos((currentArray) => [toDo, ...currentArray]);
<ul>
{toDos.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
map은 toDos 배열에 있는 item 각각에 대해 함수를 실행시켜주므로, 여기서는 각각의 item의 <li>
를 띄워준다.
그런데 만약 key를 빠뜨리면 앱이 실행은 되지만 오류가 뜬다.
Warning: Each child in a list should have a unique "key" prop.
map은 각각의 원소의 index도 받아올 수 있으므로, 위의 코드처럼 key로 index를 받아올 수 있다.
끝! 이제 coin tracker 만들러 슝슝!