TIL : React to-do-list

어제부터 리액트입문과제로 리액트를 이용해서 to-do-list 를 만들어보았다.
컴포넌트 구조도, props의 개념도 엉망진창이어서, 처음부터 제대로 꼬여버린 코드에 막막해져서 결국 한번 엎고 차근차근 다시 만들었다.
일단 차근차근 구조를 따라가면서 작성하다보니 동작하지 않던 기능도 구현이 되고, props의 개념도 차차 이해되어서 컴포넌트를 처음에 할때보다 쉽게 나눌 수 있고, 나누는데 있어서도 오류가 안났던 게 너무 기뻤다. 뭔가 알겠다는 그 기분이 너무 좋았다.
아직 고쳐야 할 부분들이 있어 미완성으로 제출했지만 어떤 부분을 해결했고, 안 됐는지 리뷰해보려고 한다.

해결 O

: 어제 삭제버튼이 동작하지 않아서 리스트를 삭제하는 함수를 여러번 검토했지만, 문제를 찾을 수가 없었다.
원인은 props를 잘못 사용했기 때문이다. props의 개념도 온전히 이해하지 못한채 코드에 마음대로 써내려가서 구조가 엉망진창이 되었던거였다.

const [todos, setTodos] = useState([
    {
      id: 1,
      title: "공부하기",
      content: "자바스크립트 공부하기",
      isDone: true,
    },
    {
      id: 2,
      title: "마트가기",
      content: "우유 사오기", 
      isDone: false,
    },
    {
      id: 3,
      title: "강의듣기",
      content: "리액트강의듣기",
      isDone: false,
    },
  ]);

todos를 그대로 전달하고, 사용할 때에 id값을 따로 뺐어야 했는데, 처음부터 id값만 전달하려고 하다보니 엉켰던 것 같다.
결론은, return에서 todos를 하위 컴포넌트에 그대로 전달하는 것으로 해결했다 !

해결 X

: input 태그가 초기화 되지 않아서 setTitle(""); 과 setContent("");로 비우는 코드를 작성해봤는데, 아무 일도 일어나지 않는다.. 원인을 찾아 해결하면 그때 정리해야지 🥲

const addTodoHandler = (event) => {
    event.preventDefault();
    const newTodo = {
      id: todos.length + 1,
      title: title,
      content: content,
      isDone: false,
    };
    setTodos([...todos, newTodo]);
    setTitle("");
    setContent("");
  };

진짜 과제 todolist....

1. 주석으로 설명달기
2. 작은 것도 컴포넌트로 나눠보는 것 연습
3. 추가 버튼 눌렀을 때 input 초기화 시키기, focus시키기
4. 추가 버튼 눌렀을 때 input에 focus 시키기
5. input태그 안 채운 채로 추가 버튼 눌렀을 때, alert창 띄우기

오늘 과제한 것도 몇 번 더 연습해서 리액트에 익숙해지는 노력이 필요할 것 같다 ! 오늘도 어제보다 친해진 것 같아서 그것만으로 만족해야지. 내일은 좀 더 친해질수 있길... 🙏🏻 ⭐️