23.06.15) React를 이용해서 Todo List 만들기(2)

🤓오늘 공부한 내용

📌Todo 추가하기

1. 추가하기 버튼

const clickAddButtonHandler = () => {
    const newTodo = {
      id: todo.length + 1,
      title,
      content,
    };
    setTodo([...todo, newTodo]);
    //다시 빈 값으로 바뀌도록 구성
    setTitle("");
    setContent("");
  };

• event를 인자로 받는다
• 이벤트핸들러를 따로 변수로 할당해주기
• 리스트 추가하는 방법
  1. title state와 content state를 엮어서 state를 하나 더 추가해주기
  2. 새로운 형태의 변수를 만들어서 (todo state)배열에 더한다
     • id: todo.length + 1 ⇒ todo가 원래 갖고있던 length에 +1
     • state에 있는 title,content key 값 가져오기
     • 배열에 더하는 법 : todo를 바꿀 수 있는건 오직 setTodo
     • setTodo([...todo, newTodo]) ⇒ 원래있던 todo배열을 스프레드문법으로 풀고 newTodo추가
     • ⇒ 불변성을 유지하기 위해서 ( react로 하여금 state가 바뀌었다는 것을 인식하기 위해서)
• 제목과 내용을 입력하고 [추가] 버튼을 클릭 후 제목 input과 내용 input은 다시 빈 값으로 변경
  • setTitle(""); , setContent("");

<button className="add-button" onClick={clickAddButtonHandler} >추가하기</button>

• <button>에 인라인으로 할당하지 않기 위해 변수로 만든 'clickAddButtonHandler' 값 onClick에 넣어주기

 

💡발생한 이슈

제목과 내용을 추가하는 <input>을 <div className="input-group">를 이용해서 묶어줬었는데

제출하는 태그를 명시해주기 위해서 <form>태그를 추가해주었다.

<form className="form">
 <div className="input-group">
   <b>제목</b> <input className="input-style" type="text" value={title} onChange={titleChangeHandler} />
   <b>내용</b> <input className="input-style" type="text" value={content} onChange={contentChangeHandler} />
 </div>
 <button className="add-button" onClick={clickAddButtonHandler}>
   추가하기
 </button>
</form>

변경하고 페이지에서 리스트를 추가해보니 리스트 추가버튼을 누르면 화면이

자동으로 새로고침이 되면서 리스트가 추가되었다가 새로고침으로 리스트가 삭제되는것…

 

🧐해결방법

무엇이 문제일까 찾아보다 form태그때문임을 알았다.. form은 자동으로 submit 되며

페이지가 새로고침되기 때문에 이를 방지하기위해서 form 태그의 onsubmit 속성값을 이용하면된다.

const onSubmitHandler = (event) => { event.preventDefault() };

event.preventDefault() 메서드를 추가해서 해당 이벤트(새로고침)을 중지해주고

form 태그의 onsubmit을 추가해주면 해결된다.

<form className="form" onSubmit={onSubmitHandler}>

 

 

📌Todo 삭제하기

1. 삭제하기 버튼

삭제하기(delete)를 하기 위해서는 각 item에 대한 제어가 들어가야한다

 

▷삭제하기 버튼을 클릭하면 수행하는 함수 추가

//list 삭제하기
  const clickRemoveButtonHandler = (removeList) => {
    const newList = todo.filter((item) => item.id !== removeList);
    setTodo(newList);
  };

• filter메서드는 조건에 해당되는 것만 가져올 수 있기 때문에 반대로 값이 아닌것을 필터링해주기
• todo.filter ⇒ todo state에 filter메서드 추가하기
  • item.id !== removeList ⇒고유key로 설정한 id가 어떤값이랑 같지 않은것만 필터링
  • ⇒삭제하기 버튼을 눌렀을 때 버튼 핸들러를 통해 item.id을 (removeList)이 안에 넘겨 받아 todo의 id와 넘겨받은 removeList과 비교해서 아닌것만 필터링 됨
• todo는 filter를 통해 새로운 값으로 할당해야 하기 때문에 const newList라는 새로운 변수 만들어준다
• setTodo를 통해서 newList로 바꿔주면 렌더링 된다

<h2>📌Working</h2>
<div className="list-wrap">
          {todo.map((item) => (
            <div key={item.id} className="list-style">
              <h2>{item.title}</h2>
              <div>{item.content}</div>
                <button className="remove-btn" onClick={() => clickRemoveButtonHandler(item.id)}>
                  삭제하기
                </button>
            </div>
          ))}
        </div>

• 삭제버튼 추가해주기(버튼을 눌렀을때 어떤 값을 넘겨줘야 한다)
  • 고유한 key값 key={item.id}을 버튼핸들러 clickRemoveButtonHandler의 매개변수로 넣어주면 삭제하기 버튼을 눌렀을 때 값이 넘겨진다
  • ⇒ const clickRemoveButtonHandler 안에 item.id을 넘겨 받아 비교 후 필터링 되는 원리

<h2>✅Done</h2>
        <div className="list-wrap">
          {todo.map((item) => (
            <div key={item.id} className="list-style">
              <h2>{item.title}</h2>
              <div>{item.content}</div>
               <button className="remove-btn" onClick={() => clickRemoveButtonHandler(item.id)}>
                  삭제하기
               </button>
              </div>
            </div>
          ))}
        </div>

• ✅Done섹션에도 map함수를 이용해서 공통적인 부분을 로직으로 만들어서 추가해주었다.