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

React/한입 리액트

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

나디아 Nadia 2024. 3. 27. 15:37

☑ 체크박스 기능

체크박스가 클릭된 요소의 아이디(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)이 바뀜