리액트 복습

올만에 군에서 처음으로 리액트를 복습했다.

얼만큼 기억을 하고있는지 궁금했고 간단한 todoList를 만들었다.

//App.js
<script>
import { useRef, useState } from "react";

import "./styles.css";
import TodoList from "./TodoList";
import { useCallback } from "react";

export default function App() {
  const idRef = useRef(4);
  const [value, setValue] = useState("");
  const [todos, setTodo] = useState([
    { text: "밥먹기", id: 1 },
    { text: "공부하기", id: 2 },
    { text: "리액트", id: 3 }
  ]);

  const onInsert = (e) => {
    const newTodo = {
      text: value,
      id: idRef.current
    };
    setTodo([...todos, newTodo]);
    idRef.current++;
    setValue("");
  };
  
  const onRemove = useCallback(
    (id) => {
      const restArr = todos.filter((item) => item.id !== id);
      setTodo(restArr);
    },
    [todos]
  );

  const onChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  return (
    <div className="App">
      <TodoList todos={todos} onRemove={onRemove} />
      <form
        onSubmit={(e) => {
          e.preventDefault();
        }}
      >
        <input value={value} onChange={onChange}></input>
        <button onClick={onInsert}>추가하기</button>
      </form>
    </div>
  );
}
</script>

위와같이 상태끌어올리기를 통해 함수는 App.js에서 관리하여 props로 넘겨주었다.

//TodoList Component
<script>
import TodoItem from "./TodoItem";

export default function TodoList({ todos, onRemove }) {
  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <TodoItem todo={todo} onRemove={onRemove} />
        ))}
      </ul>
    </div>
  );
}
</script>

그리고 todos를 props로 전달하여 map을 통해 TodoItem Component로 돌려 반복적으로 만들고있다.
todos라는 배열안에 todo는 객체 한줄한줄을 의미하고 그 객체를 TodoItem으로 전달한다.

//todoItem Component
<script>
export default function TodoItem({ todo, onRemove }) {
  return (
    <li>
      {todo.text}
      <span
        onClick={() => {
          onRemove(todo.id);
        }}
      >
        X
      </span>
    </li>
  );
}
</script>

위에서 보이듯이 X를 클릭하면 todo객체의 id가 onRemove의 매개변수로 들어가 요소를 삭제한다.

useCallback useRef useState props , 이벤트핸들링,컴포넌트 랜더링 ,등등을 아직은 그래도 기억하고있다.

다음엔 useEffect,fetch 조건부랜더링 로딩스패너,등등 연습해봐야겠다.