72일차 - react tutorial 4탄

React

• 함수와 데이터는 최대한 하류에서 생성한다.
• 그 다음 상류에는 꼭 필요한 것만 정의한다.

ul li 적용해보기!

• 리액트(React), Todo 추가 폼을 별도의 컴포넌트로 분리
• 위에 친구를 ul, li로 표현해보자!

const TodoWriteForm = ({ newTodoTitle, setNewTodoTitle, addTodo }) => {
	return (
		<>
			<div className="flex gap-x-3">
				<input
					className="input input-bordered"
					type="text"
					placeholder="할 일 적어"
					value={newTodoTitle}
					onChange={(e) => setNewTodoTitle(e.target.value)}
				/>
				<button className="btn btn-primary" onClick={addTodo}>
					할 일 추가
				</button>
			</div>
		</>
	);
};

const TodoList = ({
	todos,
	setTodos,
	index,
	todo,
	newTodoTitle,
	setNewTodoTitle,
	addTodo
}) => {
	return (
		<>
			<li>
				<span>
					{index + 1} : {todo}
				</span>
			</li>
		</>
	);
};

const App = () => {
	const [todos, setTodos] = useState([]);
	const [newTodoTitle, setNewTodoTitle] = useState("");

	const addTodo = () => {
		const trimmedTitle = newTodoTitle.trim();
		if (trimmedTitle.length == 0) return;

		setTodos([...todos, trimmedTitle]);
		setNewTodoTitle("");
	};

	return (
		<>
			<TodoWriteForm
				newTodoTitle={newTodoTitle}
				setNewTodoTitle={setNewTodoTitle}
				addTodo={addTodo}
			/>
			<hr />
			<div>
				{todos.length == 0 ? (
					<h5> 할 일이 없는건가 인간? </h5>
				) : (
					<>
						<h5>할일 목록</h5>
						<nav>
							<ul>
								{todos.map((todo, index) => (
									<TodoList
										key={index}
										todo={todo}
										index={index}
										todos={todos}
										setTodos={setTodos}
										newTodoTitle={newTodoTitle}
										setNewTodoTitle={setNewTodoTitle}
										addTodo={addTodo}
									/>
								))}
							</ul>
						</nav>
					</>
				)}
			</div>
		</>
	);
};

• 
• 

할일리스트 아이템 삭제

• 삭제버튼을 만들어보자!

const TodoList = ({
	todos,
	setTodos,
	index,
	todo,
	newTodoTitle,
	setNewTodoTitle,
	addTodo
}) => {
	const buttonStyle = {
		margin: "8px"
	};

	const removeNumber = (index) => {
		setTodos(todos.filter((_, _index) => _index != index));
	};
	
	return (
		<>
			<li>
				<span>
					{index + 1} : {todo}
				</span>
				<button onClick={() => {removeNumber(index)}} className="btn btn-primary" style={buttonStyle}>
					삭제
				</button>
			</li>
		</>
	);
};

• 

uml

• plantuml
  

newTodoTitle, setNewTodoTitle TodoWriteForm 에서 생성, 최적화

• 어차피 setTodos는 addTodo에서 하는데 App에다가 만들필요가 있나?
• 최적화를 시켜주자!

const TodoWriteForm = ({ addTodo }) => {
	const [newTodoTitle, setNewTodoTitle] = useState("");
	return (
		<>
			<div className="flex gap-x-3">
				<input
					className="input input-bordered"
					type="text"
					placeholder="할 일 적어"
					value={newTodoTitle}
					onChange={(e) => setNewTodoTitle(e.target.value)}
				/>
				<button className="btn btn-primary" onClick={() => addTodo(newTodoTitle,setNewTodoTitle)}>
					할 일 추가
				</button>
			</div>
		</>
	);
};

const TodoListItem = ({ todo, todos, index, setTodos }) => {
	console.log(`index : ${index}`);
	
	const removeTodo = () => {
		const newTodos = todos.filter((_,_index) => index != _index);
		setTodos(newTodos);
	};

	return (
		<>
			<li className="flex items-center gap-x-3">
				<span>
					{index + 1}번 째 할일 : {todo}
				</span>
				<button className="btn btn-secondary" onClick={removeTodo}>삭제</button>
			</li>
		</>
	);
};

const TodoList = ({ todos, setTodos }) => {
	return (
		<div>
			{todos.length == 0 ? (
				<h5>님 할일 없음????</h5>
			) : (
				<>
					<h5>새 할일</h5>
					<nav>
						<ul>
							{todos.map((todo, index) => (
								<TodoListItem
									key={index}
									todo={todo}
									index={index}
									todos={todos}
									setTodos={setTodos}
								/>
							))}
						</ul>
					</nav>
				</>
			)}
		</div>
	);
};

const App = () => {
	const [todos, setTodos] = useState([]);
	
	const addTodo = (newTodoTitle,setNewTodoTitle) => {
		const trimmedTitle = newTodoTitle.trim();
		if (trimmedTitle.length == 0) return;
		setTodos([...todos, trimmedTitle]);
		setNewTodoTitle("");
	};

	return (
		<>
			<TodoWriteForm

				addTodo={addTodo}
			/>
			<hr />
			<TodoList todos={todos} setTodos={setTodos} />
		</>
	);
};

• todoWriteform에서 addTodo 따로 한번 더 실행.
• 로직분해하기
• addTodo::ff addTodo를 ff로 부를 수가 있다.
• addTodo: _addTodo 이런식으로 별명을 지어줄 수 있다.

const TodoWriteForm = ({ addTodo:_addTodo }) => {
	const [newTodoTitle, setNewTodoTitle] = useState("");
	
	const addTodo = () => {
		if(newTodoTitle.trim().length == 0) return;
		_addTodo(newTodoTitle);
		setNewTodoTitle('');
	}
	
	return (
		<>
			<div className="flex gap-x-3">
				<input
					className="input input-bordered"
					type="text"
					placeholder="할 일 적어"
					value={newTodoTitle}
					onChange={(e) => setNewTodoTitle(e.target.value)}
				/>
				<button
					className="btn btn-primary"
					onClick={() => addTodo()}
				>
					할 일 추가
				</button>
			</div>
		</>
	);
};

const TodoListItem = ({ todo, todos, index, setTodos }) => {
	console.log(`index : ${index}`);

	const removeTodo = () => {
		const newTodos = todos.filter((_, _index) => index != _index);
		setTodos(newTodos);
	};

	return (
		<>
			<li className="flex items-center gap-x-3">
				<span>
					{index + 1}번 째 할일 : {todo}
				</span>
				<button className="btn btn-secondary" onClick={removeTodo}>
					삭제
				</button>
			</li>
		</>
	);
};

const TodoList = ({ todos, setTodos }) => {
	return (
		<div>
			{todos.length == 0 ? (
				<h5>님 할일 없음????</h5>
			) : (
				<>
					<h5>새 할일</h5>
					<nav>
						<ul>
							{todos.map((todo, index) => (
								<TodoListItem
									key={index}
									todo={todo}
									index={index}
									todos={todos}
									setTodos={setTodos}
								/>
							))}
						</ul>
					</nav>
				</>
			)}
		</div>
	);
};

const App = () => {
	const [todos, setTodos] = useState([]);

	const addTodo = (newTitle) => {
		if (newTitle.trim().length == 0) return;
		setTodos([...todos, newTitle.trim()]);
	};

	return (
		<>
			<TodoWriteForm addTodo={addTodo} />
			<hr />
			<TodoList todos={todos} setTodos={setTodos} />
		</>
	);
};

TODO 추가부터 ~ 삭제까지 컴포넌트 분리해서 코드 작성해보기!

• 단계별로 한번 해보자~!

1. Todo를 적을 수 있는 write폼과 addTodo함수를 만들어주자~

		<>
			<div className="flex gap-x-3">
				<input
					className="input input-bordered"
					type="text"
					placeholder="할 일 적어"
					value={newTodoTitle}
					onChange={(e) => setNewTodoTitle(e.target.value)}
				/>
				<button className="btn btn-primary" onClick={addTodo}>
					할 일 추가
				</button>
			</div>
			<hr />
			<div>{JSON.stringify(todos)}</div>
		</>

2. 그 다음 TodoWriteform을 컴포넌트 화 시켜주자~

const TodoWriteForm = ({ newTodoTitle, addTodo,setNewTodoTitle }) => {
	return (
		<>
			<div className="flex gap-x-3">
				<input
					className="input input-bordered"
					type="text"
					placeholder="할 일 적어"
					value={newTodoTitle}
					onChange={(e) => setNewTodoTitle(e.target.value)}
				/>
				<button className="btn btn-primary" onClick={addTodo}>
					할 일 추가
				</button>
			</div>
		</>
	);
};

const App = () => {
	const [todos, setTodos] = useState([]);
	const [newTodoTitle, setNewTodoTitle] = useState("");

	const addTodo = () => {
		const trimmedTitle = newTodoTitle.trim();
		if (trimmedTitle.length == 0) return;

		setTodos([...todos, trimmedTitle]);
		setNewTodoTitle("");
	};

	return (
		<>
			<TodoWriteForm
				setNewTodoTitle={setNewTodoTitle}
				newTodoTitle={newTodoTitle}
				addTodo={addTodo}
			/>
			<hr />
			<div>{JSON.stringify(todos)}</div>
		</>
	);
};

TODO

• setState 자료 찾아서 정리해보기러기

느낀점(내 상태 체크)

• 일단.. onChange에 대해서 제대로 아는게 없는 것 같다.. 구글링해서 다시 공부해보자!