💎 TodoList
- useState : 리액트에서 가장많이쓰는 상태 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState 라는 함수를 사용해보게 되는데
- const newTodos [ ...todos,newTodo ] : 전개구문을 사용하여 todos 2개객체와 newTodo에 입력되어 생성되는객체를 합쳐준다.
전개변수(참고)--> https://mungwang.tistory.com/entry/React-1
import React, { useState } from 'react';
// useState 복습
const InputName = () => {
// state : 컴포넌트의 상태
// useState : 컴포넌트의 상태를 관리
// -> state 변화가 감지되면 컴포넌트를 리렌더링
const [name, setName] = useState('');
// name: 변수명
// setName : name 변수의 setter
// useState : name 변수에 대입되는 초기값을 ''(빈칸)으로 지정
return(
<div>
<p>이름을 입력하세요</p>
<input type='text' onChange={ e=> setName(e.target.value)}/>
<h3>{name}</h3>
</div>
);
};
const TodoList1 = () => {
// 할 일을 저장할 변수
// -> 상태가 변하면 컴포넌트 (TodoList1)을 리렌더링
const [todos, setTodos] = useState([
{text : '프로젝트', completed : false},
{text : '점심 먹기', completed : false}
]);
console.log(todos);
// 할 일 입력 컴포넌트
const InputTodo = () => {
const [inputText, setInputText] = useState('');
// 버튼 클릭 시 할일 추가
const addTodo = () => {
const newTodo = {text : inputText, completed : false};
// todos에 newTodo를 추가한 새로운 객체배열 newTodos
const newTodos = [...todos, newTodo];
// 새로운 객체배열 newTodos를 todos에 대입
// -> 상태 변화 인식 -> 리렌더링 진행
setTodos(newTodos);
setInputText('') // 입력된 할 일 삭제
};
const NewTodoList = (todos) =>{
let arr = [];
for (let i=0; i<todos.length; i++){
arr.push(
<h4>{todos[i].text}</h4>
)
}
return arr;
}
return(
<div>
<h4>할 일 추가</h4>
<input type='text' onChange={e=> setInputText(e.target.value)}/>
<button onClick={addTodo}>추가하기</button>
<h3>{NewTodoList(todos)}</h3>
</div>
)
};
return(
<>
<hr/>
<InputName/>
<hr/>
<h1>Todo List1</h1>
{/* 입력 */}
<InputTodo/>
</>
);
};
export default TodoList1;
