JS 리액트 TODO LIST

우선은 이렇게 만들어 두었다.

이제 수정 기능을 만들 차례이다.

    const changeEditMode = () => {
        setEditMode(true);
    };

함수 선언.

{/*<span>{JSON.stringify(editMode)}</span>*/}
{editMode ? (
    <input
    type="text"
    className="input input-bordered"
    placeholder="수정 내용 써"
    value={todo}
    />
    ) : (
        todo
    )}
    <button className="btn btn-secondary" onClick={changeEditMode}>
        수정
    </button>

버튼과 삼향연산자 선언. 삼향연산자에서 setEditMode가 트루일 때, input창이 나온다.

준비준비는 끝났으니까 수정 로직을 만들면 되는데, 저번에 숫자기록 하는 거 만들 때 벨류를 그대로 넣으면 타이핑이 안되는 이슈 기억나는가? 여기도 똑같다. 그래서 수정.

    const [newTodoTitle, setNewTodoTitle] = useState(todo);

todo를 담을 곳 만들어주자고.

    const changeReadMode = () => {
        setNewTodoTitle(todo);
        setEditMode(false);
    };

수정 취소시에 원래 값으로 다시 돌려주는 로직도 추가해주고.

value={newTodoTitle}
onChange={(e) => setNewTodoTitle(e.target.value)}

input에 벨류와 onChage 메서드도 추가.

이제는 수정내용이 null인 상황을 막아주고 수정을 완료시키는 메서드만 만들어주면 된다.

const modifyTodo = () => {
  if(newTodoTitle.trim().length == 0) return;
  _modifyTodo(index, newTodoTitle.trim());
  changeReadMode();

그리고 메서드 밖에서 수정 메서드를 map으로 순회하며 실질적으로 수정시켜줄 코드도 추가.

    const modifyTodo = (index, todo) => {
        const newTodos = todos.map((_todo, _index) =>
            index != _index ? _todo : todo
        );
        setTodos(newTodos);
    };

그리고 이 app안에 선언한 modifyTodo를 전달 받기 위해서 명시해준다.

const TodoList = ({ todos, removeTodo, modifyTodo }) => {이거 말하는거임.

그렇게 다 전달 받으면 완성.

수정 잘 된다!

저번에 했던 정수 기록이랑 별반 차이가 없다, number가 text로 바뀐정도 차이같다.