21일차 TIL (개인 프로젝트 ToDoList / 후발대 OT)

기초강의를 듣고 어제 오후 늦게부터 개인 작업을 진행해 보았다.

 

//전체를 감싸주는 function을 선언한다.

function App() {
    const [todo, setTodo] = useState([
        {
            id: 1,
            title: "리액트 공부하기",
            details: "리액트 기초에 대하여",
            isDone: false,
        },
        {
            id: 2,
            title: "러닝 40분",
            details: "3:1 비율로 인터벌",
            isDone: false,
        },
    ]);
//useState는 기본 빈값으로 설정하는데, 여기에서는 예시 자료와

유사하게 하기 위해서 기본 세팅 값들을 넣어주었다.

 

//제목 input과 설명이 들어가는 input을 각자 선언해주었다.

    const [title, setTitle] = useState("");
    const [details, setDetails] = useState("");

 

//위 input에 값들(변경된 값)이 들어가면 그 값 (value)도 선언해준다. 
    const titleChangeHandler = (e) => {
        setTitle(e.target.value);
    };
    const detailsChangeHandler = (e) => {
        setDetails(e.target.value);
    };

//todo에 배열을 추가해주는 선언 

false 값을 버튼의 상태에 따라 바꿔주기위해 추가해 주었다.

 true : false;
    const addHandler = () => {
        const addContent = {
            id: todo.length + 1,
            title: title,
            details: details,
            isDone: false,
        };

//변경된 todo = setTodo에 기존 todo의 배열과 추가된 addContent를 추가해서 보여주기.
        setTodo([...todo, addContent]);
//추가해서 보여준 다음 input들의 내부는 비워주기.
        setTitle("");
        setDetails("");
    };

 

//삭제기능, 클릭시 해당 todo.id를 제외( filter ) 시키고 남긴다 = 이를 선언해 주고

다시 변경된 setTodo에 넣어준다.

    const delHandler = (id) => {
        const newTodo = todo.filter((todo) => todo.id !== id);
        setTodo(newTodo);
    };

//여기서 부터 헤매고 있는 부분이다. 조건문을 써서 클릭시, true : false가 바뀌며

true 혹은 false 인지 여부에 따라 버튼이 완료 또는 취소로 바뀌고

완료면 Don div로 넘어가고 다시 취소를 누르면 Working div로 돌아와야한다.

    // const passHandler = (props) => {
    //     const newTodo2 = todo.isDone ? "취소" : "완료";
    //     // console.log(newTodo2);

    //     function completeBtn() {
    //         todo({ isDone: true });
    //     }
    //     function cancelBtn() {
    //         todo({ isDone: false });
    //     }
    //     const todosIsDone = todo.isDone;
    //     let changebtn;
    //     if (todosIsDone) {
    //         changebtn = <completeBtn />;
    //     }
    // };

 

삭제 및 등록 클릭시 input tag 비워주기까지는 완료했는데 위에서 못 풀어 내려가고 있었다.

 

그냥 쉽게 생각해서 강의에 나온 예제를 실습해 본 그 파일 그대로 수정해 가면서 써내려갔는데

오히려 더 헷갈리게 된 거 같다.

팀원분과 대화를 하면 조언을 얻어서 해결을 하긴 했는데, 아직 내 것이 아닌거 같다. 몇 번 더 뜯어보고 곱씹어 보며 정리한 글을 내일 올려야겠다. 재밌다