[react] todolist 만들기 컴포넌트 나누고, 이벤트 핸들러 주기

큰 컴포넌트와 작은 컴포넌트로 나누기
큰 컴포넌트는 TodoList테두리 부분 - 빨간색 선
작은 컴포넌트는 추가되는 아이템 부분 - 검은색 선

 

어떤 기능이 있나?

1. input창이 있고, 버튼이 있다.

2. 인풋창에 값을 입력하고 버튼을 클릭하면 아이템이 추가가된다.

3. 아이템 삭제버튼을 누르면 삭제가 가능하다.

---

function App() {
  const [inputValue,setInputValue] = useState('');
  const [todoList,setTodoList] = useState([]);
  const addItem = () => {
    console.log("요기", inputValue) // 새로운 인풋벨루
    setTodoList([...todoList, inputValue])  // 기존에 있는 아이템 유지하고 새로추가
  }

  return (
    <main>
      <input value={inputValue} type="text" onChange={(event)=>setInputValue(event.target.value)}></input>
      <button onClick={addItem}>입력하세요</button>

      <TodoBoard todoList={todoList}/>
    </main>
  );
}

사용자가 입력할 input 태그를 사용해서 입력칸을 만들고, input창에 값을 입력할 때 마다 호출되는 onChange 이벤트(핸들링)를 사용.

onChange를 왜 쓰냐? 값을 넣을때마다 알려주는 역할을 한다.

이제 사용자가 입력한 값을 읽어올 거임, 모든 이벤트 핸들러는 이벤트 객체를 줌. 즉, 이 이벤트 안에 입력한 값이 들어 있다는 뜻. 

console.log(event.target.value)} 입력한 값을 찍어보자.

사용자가 입력한 값이 잘 찍히는걸 볼 수 있다.

이제 사용자가 입력한 값을 저장해놨다가 Item에 전달하기 저장하기 위해 state를 쓰기

 

import React, {useState}from 'react';

const [inputValue,setInputValue] = useState('')

<input value={inputValue} type="text" onChange={(event)=>console.log(event.target.value)}></input>

처음에는 모르니까 비어있는 문자열로 초기값 주기(배열)

inputValue의 값을 input에 넣어주고, 값이 업데이트 될 때마다 setInputValue를 console.log()대신에 써서 input에 값을 매번 업데이트 해주기

---

setInputValue(event.target.value)}
<button onClick={addItem}>입력하세요</button>

클릭할 때마다 함수를 호출하기 addItem이라는 함수 호출해서 아이템 추가하기

 

---

사용자가 입력하면 inputValue(안에 저장) => 원클릭 이벤트를 누르면 기존 todoList를 유지하고 inputValue를 덮어씌움

todoBoard Component에 todoList를 props로 보냄

 

---

 

onClick은 클릭했을 때 마다 반응하는거

onChange는 값이 변경 될때마다 반응 (ex) 입력된 값 text)

잘못 알았던 부분 event는 함수 객체가 아니라 변수!!