리액트 추가하기(Create)기능구현 /input 리셋 / 앞뒤빈칸제거

 

1. 기본추가하기

2. input 리셋시키기

3.  빈칸만입력 & 앞뒤빈칸 제거

 

 

✅ 기본 추가하기

// TodoList.js

const [todos, setTodos] = useState([
    {
      id: "1",
      text: "산책하기",
      status: "active",
    },
    {
      id: "2",
      text: "공부하기",
      status: "active",
    },
  ]);



const handleAdd = (todo) => {
setTodos([...todos, todo]);
};

return (
<AddTodo onAdd={handleAdd} />
)

1️⃣  AddTodo 컴포넌트에 onAdd를 통해 props 값을 전달한다.

2️⃣ handleAdd 함수를 만들고, todo로 받아온 값을 새롭게 추가해준다.

...스프레트 연산자를 통해 기존의 값을 복사한 뒤, 받아온 값(todo)을 덮어 씌어준다.

 

//AddTodo.js

export default function AddTodo({ onAdd }) {
  const [text, setText] = useState("");
  const handleChange = (e) => setText(e.target.value);
  const handleSubmit = (e) => {
    e.preventDefault();
    onAdd({ id:uuidv4(), text, status: "active" });
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Add Todo"
        value={text}
        onChange={handleChange}
      />
      <button>등록</button>
    </form>
  );
}

3️⃣ AddTodo 컴포넌트에 기본적인 input의 속성들을 넣어주고, useState를 통해서 상태관리를 한다.

4️⃣ onChange를 통해서 e.target.value받는다.

 

5️⃣ form태그에 onSubmit을 통해서 값을 받는다. 

6️⃣ handleSubmit 함수를 만들어서 onSubmit으로 받을 값을 입력한다.

- e.preventDefault를 통해 동작을 한번만 수행하게 한다.

- 내부에 상위로부터 prop으로 전달받을 onAdd()를 만들고 내부에 id, text, status를 입력한다.

 

 

 

👍 이렇게만 해줘도, 이제 추가하기가 가능하다!!

 

⛔️ 하지만, 새로운 값이 추가된 뒤에 input창안의 값들이 리셋되지 않아서 일일이 지워줘야해서 불편하다. ⛔️

 

 

✅  input 리셋시키기

 const handleSubmit = (e) => {
    e.preventDefault();
    onAdd({ id: "고유한값", text, status: "active" });
    setText("");
  };

➡️ handleSubmit함수안에 가장 아래에  setText("")  를 입력해준다.

   

👍 이렇게만 해줘도, input값안을 빈값으로 만들어줄 수 있다.

⛔️ 훨씬 편해졌지만, 사용자의 편의성을 위해서 1️⃣ 빈값만입력제게, 2️⃣ 앞뒤의 빈칸제거와 같은 기능을추가해주면 좋다.⛔️

 

 

 

✅  빈칸만입력 & 앞뒤빈칸 제거

const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim().length === 0) {
      return;
    }
    onAdd({ id: "고유한값", text, status: "active" });
    setText("");
  };

➡️ text.trim한 값이 0이라면 값을 바로 return해주는 if문을 만든다.

 

여기서 주의할점은 코드의 순서이다. 

if문이 가장 위에 있어야 정상적으로 동작한다.

 

👍 이제 빈칸만있으면 등록이 안되고, 앞뒤의 빈칸도 제거해준다