안녕하세요. input에 입력한 값이 화면에 하나씩 밀려서 출력되는 오류가 있는데, 그 이유를 모르겠습니다.
처음에 input에 입력한 값은 localStorage에도 []빈값으로 출력되고, 그 다음 버튼을 누르면 그 때부터 저장이 됩니다.
어느 부분에서 잘못된 건지 도와주실 수 있을까요? 감사합니다!
```Todo.jsx
<pre>import React from 'react'
import { useState } from 'react'
import Input from './Input'
import TodoList from './TodoList'
function Todo() {
const [input, setInput] = useState('')
const [todos, setTodos] = useState([])
const submitHandler = (e) => {
e.preventDefault()
setTodos([...todos, input])
}
const save = () => {
localStorage.setItem('todos', JSON.stringify(todos))
}</pre>
<pre>const savedTodos = JSON.parse(localStorage.getItem('todos'))
return (
<div>
<h1>투두리스트</h1>
<form>
<Input input={input} setInput={setInput} />
<button
onClick={(e) => {
setInput('')
submitHandler(e)
save()
}}
>
버튼
</button>
</form>
{todos.length > 0 ? <div>{todos.length}개의 할일</div> : <div>할일이 없습니다</div>}
<TodoList todos={todos} setTodos={setTodos} savedTodos={savedTodos} save={save} />
</div>
)
}
export default Todo
```
```Input.jsx</pre>
<pre>import React from 'react'</pre>
<pre>function Input({ input, setInput }) {
return (
<div>
<input
value={input}
type="text"
onChange={(e) => {
setInput(e.target.value)
}}
/>
</div>
)
}</pre>
<pre>export default Input</pre>
<pre>```
```TodoList.jsx</pre>
<pre>import React from 'react'
function TodoList({ todos, setTodos, save, savedTodos }) {
const delItem = (e) => {
const del = e.target.parentNode
del.remove()
setTodos(todos.filter((todo) => todo.id != del.firstChild.id))
}</pre>
<pre>return (
<div>
<h3>
{savedTodos != null
? savedTodos.map((todo, i) => (
<div key={i}>
<div id={Date.now()}>{todo}</div>
<button onClick={delItem}>X</button>
</div>
))
: null}
</h3>
</div>
)
}</pre>
<pre>export default TodoList</pre>
<pre>```
