멘토링(기술멘토)

ToDoList 완료하기

(문제 조건)

• 완료된다 : 화면이 다시 그려진다. 화면이 바뀐다 =>

  상태값에 변화를 준다. 리렌더링이 일어난다.

(참고사항)

• unique한 key값을 줘야하는 이유 : 변경할 값만 경제적으로 바꿔준다. 메모리 절약 가능
• uuid도 사용 가능

(문제 해결) : ㅑㄹ & boolean을 사용하자 => not연산자를 사용하면 간편하다.

참고 코드

// {...todo, isDone:!todo.isDone}

import React, { useState } from "react";

// 1. useState 를 사용하여 할일 목록 만들기
// 2. 할일 목록을 map 함수를 사용하여 렌더링하기
// 3. 등록 버튼을 통해 새로운 할일 목록 추가하기

const Home = () => {
  const [todo, setTodo] = useState({ title: "", content: "", isDone: false });

  const handleClickDoneBtn = () => {
    setTodo({ ...todo, isDone: !todo.isDone });
  };

  return (
    <>
      <div>
        <h1>미완료</h1>
        <div>
          {!todo.isDone ? (
            <>
              <p>할일</p>
              <button
                type="button"
                className="done-btn"
                onClick={handleClickDoneBtn}
              >
                완료
              </button>
            </>
          ) : null}
        </div>
      </div>
      <div>
        <h1>완료</h1>
        <div>
          {todo.isDone ? (
            <>
              <p>할일</p>
              <button
                type="button"
                className="done-btn"
                onClick={handleClickDoneBtn}
              >
                되돌리기
              </button>
            </>
          ) : null}
        </div>
      </div>
    </>
  );
};

export default Home;

보충한 코드

// 완료 처리
const onDoneHandler = (id) => {
	// 1. todoList를 돈다.
	// 2. todoList 내의 "현재 클릭"한 todo의 isDone값을 변경해준다.(현재 클릭한 id값을 알아야한다.)
	// 3. 그 배열을 새로 업데이트(setTodoList)해준다.
	const newTodoList = todoList.map((item) => {
		if(item.id === id){
		// item.isDone = !item.isDone;
		// not 연산자
		item.isDone = item.isDone ? false:true
		//3항 연산자. 결국 값이다.
	}
		return item;
	})
	setTodoList(newTodoList)
}


  return(
    <div>
			<div>
      제목 <input type="text" value={inputs.title||""} name="title" onChange={onChangeHandler}/>
			내용 <input type="text" value={inputs.content||""} name="content" onChange={onChangeHandler}/>
			<button type="submit" onClick={onSubmitHandler}>추가하기</button>
			</div>

			<div>
				<h2>
					Working
					{/* isDone이 false인 값만 렌더링된다. */}
					{/* isDone이 false인것만, 이것을 순회하며 렌더링 => filter*/}
				</h2>
					<>
					{todoList.filter((item) => !item.isDone).map((item, id) =>{
						return <div key={id}>
							<div> <h3>{item.title}</h3>
										<p>{item.content}</p>
							 </div>
							
							<button type="button" onClick={()=>{onDeleteHandler(item.id)}}>삭제</button>
						<button type="button" onClick={()=>{onDoneHandler(item.id)}}>완료</button>
							
						</div>
					})}
					</>
</div>

			<div>
				<h2>
					Done
				</h2>
					<>
					{todoList.filter((item) => item.isDone).map((item, id) =>{
						return <div key={id}>
							<div> <h3>{item.title}</h3>
										<p>{item.content}</p>
							 </div>
							<button type="button" onClick={()=>{onDeleteHandler(item.id)}}>삭제</button>
						<button type="button" onClick={()=>{onDoneHandler(item.id)}}>취소</button>
							
						</div>
					})}
					</>

더 공부할 것 : 시멘틱 마크업

다음시간 : 컴포넌트 나누기

추가할 것: 컴포넌트 나누기 + CSS