useEffect는 리액트를 배우게 되면 보통 두번째로 먼저 배우는 훅이다. 첫 번째는 당연 useState일거고 그런데, 갑자기 늘 함수에서 바로 return값이 주어졌던 경험에 비춰 useEffect를 봤더니 아니 왜 return이 자동으로 작동을 안할까라는 의문이 들었다. 물론, 우리는 추측을 할 수 있다. 어떤 로직에 의해서 return 값을 뱉는 것이 제어되고 있을거라는 추측말이다. 하지만, 리액트 초보로서 한 번 리액트의 전반에 대해 알아볼겸 파보았다. useEffect(() => { console.log("I am the effect"); return () => { console.log("I run after re-render, but before the next UseEffect") } }..

내 리액트의 현재 수준은 기초에 머물러 있다. 기초에 머물러 있는 것은 문제가 되지 않는데 기초에서 몇 달째 좀처럼 나아가질 못하고 있어 문제이다. html, css, js는 강의를 듣다보면 어느 정도 코드를 쓰다보면 느는 것을 볼 수 있는데 리액트는 그게 되지 않는다. 그 이유는 훅의 사용 때문에 그렇다. 훅의 원리를 제대로 이해하지 못하면 훅을 사용할 수 없고 그 것은 우리가 자동차가 있어도 운전 방법을 몰라 걸어가는 것과 같다. 그래서 몇 달 째는 나는 useState, useEffect에서 벗어나지 못하고 있었다. 그래서 이제부터 좀 차근차근 정리해나가기로 한다. 사실 정리는 공식문서에 정연하게 되어있지만 난 아직 공식문서를 읽고 실행할 수 있는 단계에 이르지 못했다. 어느 정도 알아먹어야 공식문..

리액트 파일에 작성하여 리액트 카테고리에 넣었지만 실상 js에 대한 내용이다. import { useState } from "react"; function ToDoList2() { const [todoList, setTodoList] = useState([]); const [todo, setTodo] = useState(""); const handleInput = (e: React.ChangeEvent) => { setTodo(e.target.value); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // 기본적인 것을 잊고 있었다. 새로고침을 없애고 form을 이용해서 엔터고칠수 있다. setTodoList((prev) =..