- 1) 할 일 추가(배열)
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
const App = () => {
const [todos, setTodos] = useState([]);
const [newTodoTitle, setNewTodoTitle] = useState('');
const addTodo = () => {
setTodos([...todos,newTodoTitle]);
}
return (
<>
<div>
<input
className="input input-bordered"
type="text"
placeholder="할일을 적어보자!"
value={newTodoTitle}
onChange={(e) => setNewTodoTitle(e.target.value)}
/>
<button className="btn btn-primary ml-3" onClick={addTodo}>추가</button>
</div>
<hr class="mt-1" />
<div>{JSON.stringify(todos)}</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
- input에 값이 입력안돼 -> onChange이벤트 사용!
- addTodo -> setTodos에 todos를 복사해서 그 배열에 입력한 newTodoTitle값을 넣어줌
- onChange ={(e) => setNewTodoTitle.target.value} -> e(이벤트 발생) => setNewTodoTitle에 입력값 넣어줌
- 2) 컴포넌트 분리
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
const TodoWriteForm = ({newTodoTitle, setNewTodoTitle, addTodo}) => {
return (
<>
<div>
<input
className="input input-bordered"
type="text"
placeholder="할일을 적어보자!"
value={newTodoTitle}
onChange={(e) => setNewTodoTitle(e.target.value)}
/>
<button className="btn btn-primary ml-3" onClick={addTodo}>추가</button>
</div>
</>
);
};
const App = () => {
const [todos, setTodos] = useState([]);
const [newTodoTitle, setNewTodoTitle] = useState('');
const addTodo = () => {
const reimmedTitle = newTodoTitle.trim();
if(reimmedTitle.length == 0) return;
setTodos([...todos,reimmedTitle]);
setNewTodoTitle("");
}
return (
<>
<TodoWriteForm
newTodoTitle={newTodoTitle}
setNewTodoTitle={setNewTodoTitle}
addTodo={addTodo}/>
<hr class="mt-1" />
<div>{JSON.stringify(todos)}</div>
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
- 할 일 적는 곳과 리스트를 분리함
- TodoWriteForm이라는 할 일을 입력하는 컴포넌트를 만들어서 관리! -> TodoWriteForm에서 필요한 애들을 넘겨주고 넘겨받아
- addTodo에서 입력된 값이 없는 경우 추가 할 수 없게 retrun 시킴!
- 추가 폼! > setNewTodoTitle(""); // input에 값 초기화 시켜줄라고
'JavaScript > React' 카테고리의 다른 글
React - 할 일 폼 만들기(3)_삭제, plantuml(구조 파악) (1) | 2024.03.27 |
---|---|
React - 할 일 폼 만들기(2)_ul, li, 컴포넌트 분리(2) (0) | 2024.03.26 |
React - 자동 입력 (0) | 2024.03.26 |
React - 수정모드 (0) | 2024.03.25 |
React - 일반모드, 토글모드 (1) | 2024.03.23 |