Tiny Bunny
본문 바로가기
JavaScript/React

React - 할 일 폼 만들기(1)_배열, 컴포넌트 분리

by 내이름효주 2024. 3. 26.
  • 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에 값 초기화 시켜줄라고