본격적인 이론 공부는 끝났고, 이제는 행동할 때. 그렇다 바로 Act할 때이다. 죄송.
가장 첫 번째로 만드는 것은 바로 To_Do_List이다. Vue를 처음 공부할 때도 투두리스트는 가장 처음으로 만들어 본 것이었다.
가장 먼저 만들어야 하는 것은 toDo들을 등록하는 것이다.
준비물로는 input 태그와 useState가 있겠다.
헉, 혹시 당신 useState가 기억이 안난다구? (사실 나도 기억 안나서, 한 번 더 공부하고 왔다.)
그렇다면 당신을 위해 준비된 React 시리즈 - useState
const [toDo, setTodo] = useState("");
const onChange = (event) => setTodo(event.target.value);;
return <div>
<input onChange={onChange} value={toDo} type ="text" placeholder="입력하세요"/>
<div>;사설이지만, 클론코딩을 할 때 단순히 따라 치지 않고, 이해하면서 치려고 노력한다. + GPT의 도움 (그러다보니까 너무 오래 걸림). 하지만 이해하고 나면 안 보고도 코드를 칠 수 있다는 사실!
input태그에 달린 많은 속성들이 있는데, 풀어서 설명해보자면.
onChange (이벤트 리스너) , value (input 태그에 입력되는 값) <이 두개가 가장 중요>
type, placeholder 는 input 태그의 성격을 결정하는 것들이다.
또한 useState("") 를 통해서, onChange event가 일어날 때마다, state 상황을 setTodo로 입력된 값의 value로 바꾸어 주는 것이다.
이 과정이 이해가 되지 않는가!
이제 이 input 요소에 입력한 값을 toDoList 배열에 담아야한다. 추가할 부분은 아래와 같다.
const [toDos, setTodos] = useState([]);
const onSubmit = (event) => {
event.preventDefault();
if(toDo === ""){
return;
}
setTodo("");
setTodos(currentArray => [toDo, ...currentArray])
<form onSubmit={onSubmit}> input 태그를 감싸는 form 태그를 만들어 이벤트 리스너로 onSubmit을 추가한다. 제출된 요소들은 toDoList를 구성할 배열에 담겨야 한다. 그러니 배열이 state를 이용하여 추가될 것이다.
state를 이용하여 추가되어야 한다는 것이 무슨 소리냐면, toDos 값에 직접적으로 접근이 되어서는 안된다는 말이다.
toDos = "밥먹기" (x) 와 같은 용법은 옳지 않다.
기존 배열에 input 값을 추가하기 위하여
setTodos(currentArray => [toDo, ...currentArray])를 추가한다.
마지막으로 preventDefault()는 폼 제출 이벤트가 페이지의 새로고침이나 이동을 일으키지 않도록 한다. 이는 동적인 상호작용을 방해받지 않고 원할하게 처리할 수 있다.
이후에는 위 toDos의 요소들을 list에 담아 보여줘야겠지?
<ul>
{toDos.map((item, index) => <li key={index}>{item}</li>)}
</ul>map을 사용하여 담아 보여줄 수 있다. 자바 스크립트의 용법인 map에 대해 잠시 설명하고 넘어갈 필요가 있다.
map
: 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과로 새로운 배열을 생성. React에서는 주로 배열의 요소를 UI 요소로 변환하는 데 사용
map을 사용하여 item과 index를 매개변수로 가진다.
item: 배열의 현재 요소이다.
index: 배열 내 현재 요소의 인덱스다. React에서는 각 리스트 요소에 고유한 key를 제공해야 하는데, 이때 index를 사용할 수 있다.
마지막으로 전체 구문을 보여주겠다. 아래 구문은, list에 등록만 가능한데, 만약에 체크박스 표시를 각 요소 옆에 주고 체크가 되면 취소선이 그어진다거나, 배열에서 삭제된다거나 하는 식으로 진짜 todolist를 만들 수 있겠지만, 책의 칸이 부족하여 여기까지 서술한다 ㅎ
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;
}
setTodo("");
setTodos(currentArray => [toDo, ...currentArray])
};
console.log(toDos);
return <div>
<h1>To Do List ({toDos.length})</h1>
<form onSubmit={onSubmit}>
<input onChange={onChange} value={toDo} type ="text" placeholder="입력하세요"/>
<button>할 일 등록</button>
</form>
</div>;
}
export default App;대충 사진
