[React] To-do List: 체크박스 기능

 

 

 

☑ 체크박스 기능

• 체크박스가 클릭된 요소의 아이디(targetId)를 받아와서 todos state 값들 중 targetId와 일치하는 id의 todo를 찾아서 isDone 값을 변경

 

 

 

 

🔺App.jsx

 

 

체크박스 업데이트 함수 생성

• 체크박스가 클릭된 요소의 id(targetId)를 인수로 받아오기

todos state 배열에서 targetId(체크박스가 클릭된 요소의 id) === id가 일치하는 todo의 isDone 값을 바꾼 배열을 생성하는 함수 생성

• state를 isDone을 바꾼 todo로 변경하기 위한 변경 함수 사용
• 일치하면 todo를 spread 연산자(...)로 풀어헤쳐서 isDone의 상태를 현재의 반대값으로 만든다.

  const onUpdate = (targetId) => { // 체크박스가 클릭된 요소의 id(targetId)를 인수로 받아옴

    setTodos(todos.map((todo)=> { // state를 isDone을 바꾼 todo로 변경하기 위한 변경 함수
      // 일치하면 todo를 spread 연산자(...)로 풀어헤쳐서 isDone의 상태를 현재의 반대값으로 만든다.
      if (todo.id === targetId) {
        return {
          ...todo,
          isDone: !todo.isDone
        }
      }
      // 일치하지 않으면 원래 todo 반환
      return todo 
    }))
  }

 

 

 

 

return문

• 위의 함수들은 TodoItem의 <input> 체크박스에 클릭이 발생하면 호출해줘야 함
  👉 List 컴포넌트에게 props로 onUpdate 함수를 넘겨준다. (TodoItme 컴포넌트는 List 컴포넌트 내부에 있기 때문)

  return (
    <div className='App'>
      <Header/>
      <Editor onCreate={onCreate}/> 
      <List todos={todos} onUpdate={onUpdate}/> 
      {/* List.jsx에 props로 onUpdate 함수 전달 */}
    </div>
  )

 

 

 

---

 

 

🔺List.jsx

 

 

App.jsx에서 onUpdate(체크박스 기능) 받아오기(구조분해할당)

• onUpdate 함수는 TodoItem 컴포넌트에 있어야 하는데 TodoItem 컴포넌트는 List 컴포넌트기 때문

const List = ({todos, onUpdate}) => {
            ...
}

 

 

 

 

return문

• TodoItem 컴포넌트로 onUpdate 함수 넘겨줌

    return (
        <div className="List">
            <h1>Todo List 🌱</h1>
            <input 
                placeholder="검색어를 입력하세요"
                value={search} 
                onChange={onChangeSearch} 
            />
            
            <div className="Todos_wrapper">
                {filteredTodos.map((todo) => { 
                    return <TodoItem key={todo.id} {...todo} onUpdate={onUpdate} />;
                    <!-- TodoItem.jsx에 props로 onUpdate 함수 전달하기 -->
                })}
            </div>
        </div>
    )

 

 

 

---

 

 

🔺 TodoItem.jsx

 

 

List 컴포넌트에서 onUpdate(체크박스) 함수 받아오기

const TodoItem = ({id, isDone, content, date, onUpdate}) => {

 

 

onUpdate 함수의 인수로 id를 전달하는 체크 박스 함수(onChange에 넣을 함수) 만들기

• <input> checkbox 태그에 onChange 기능 넣기
  (<button>이 아니라 <input>이기 때문에 onChange 이용)

    // 체크 박스 함수(onChange에 넣을 함수)
    const onChangeCheckbox = () => {
        onUpdate(id);
        // onUpdate 함수의 인수로 id 전달
    };

    return (
        <div className="TodoItem">
            <input 
                type="checkbox" 
                checked={isDone} 
                onChange={onChangeCheckbox} 
                // 체크 박스 태그의 onChange 기능에 체크박스 기능 넣기
            />
            <div className="content">{content}</div>
            <div className="date">{new Date(date).toLocaleDateString()}</div>
            <button>삭제</button>
        </div>
    )

 

 

 

 

결국 App 컴포넌트에서 만든 체크박스 기능 함수(onUpdate)를 TodoItem 컴포넌트에서 쓰기 위해 전달한 과정임

TodoItem 컴포넌트에서 체크박스의 상태(isDone)이 바뀜

 

 

---

 

 

App.jsx

List.jsx

TodoItem.jsx

 

 

 

---

 

 

출처

한입 크기로 잘라먹는 리액트