Todo App 하면서 배운것들

기억하면 좋은 코드들

1. useCallback

import React, { useState, useCallback } from 'react';
import { MdAdd } from 'react-icons/md';
import './TodoInsert.scss';

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

  const onSubmit = useCallback(
    (e) => {
      onInsert(value);
      setValue(''); //value 값 초기화
      e.preventDefault();
    },
    [onInsert, value],
  );

  return (
    <form className="TodoInsert" onSubmit={onSubmit}>
      <input
        placeholder=" 할 일을 입력하세요"
        value={value}
        onChange={onChange}
      />
      <button type="submit">
        <MdAdd />
      </button>
    </form>
  );
};

export default TodoInsert;

컴포넌트가 리렌더링될 때마다 함수를 새로 만드는것이 아니라, 한번 함수를 만들고, 재사용할 수 있도록 useCallback 을 사용하라!!!!

input창의 값을 OnChange 할때마다 새로고침 되지 말고 메모리에 저장 하라는 것으로 해석하고 있는중..

2. onClick vs onSubmit

onClick 은 버튼같은것을 클릭했을때 발동하라 이고, onSubmit 은 뭐를 제출했을대 사용하는건데..
보통 Form에 onSubmit이고 Button에 onClick을 붙인다고 알고있다..근대...위에 코드에서 onClick 보다 onSubmit 을 사용한 가장큰이유는 onSubmit은 기본적으로 enter 기능이 탑재되있음.

onClick 을 사용 하면 만약에 누가 enter쳤다 할려면 새로운 함수를 만들어야 한다는 뜻임.!!!! 🤯🙀

3. useRef

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from './components/TodoTemplate';
import TodoInsert from './components/TodoInsert';
import TodoList from './components/TodoList';

const App = () => {
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: '리액트 기초 알아보기',
      checked: true,
    },
    {
      id: 2,
      text: '컴포넌트 스타일링해 보기',
      checked: true,
    },
    {
      id: 3,
      text: '일정 관리 앱 만들어 보기',
      checked: false,
    },
  ]);
  //고유 값으로 사용될 아이디.
  // ref를 사용하여 변수 담기

  const nextId = useRef(4);
  const onInsert = useCallback(
    (text) => {
      const todo = {
        id: nextId.current,
        text,
        checked: false,
      };
      setTodos(todos.concat(todo));
      nextId.current += 1; //nextId 1씩 더하기
    },
    [todos],
  );
  const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos],
  );

  const onToggle = useCallback(
    (id) => {
      setTodos(
        todos.map((todo) =>
          todo.id === id ? { ...todo, checked: !todo.checked } : todo,
        ),
      );
    },
    [todos],
  );

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove} onToggle={onToggle} />
    </TodoTemplate>
  );
};

export default App;

새로운 todo를 만드는데 useState 로 id 값을 추가 할수 있는데.. 왜 useRef? 일까?

id 값은 렌더링되는 정보가 아니기 때문이다..값이 화면에 보이지도 않고. 값이 바뀐다고 해서 리렌더링이 될필요성이 없음. 그저 참조용임..

다음부터 이런 경우가 있음 나도 이제 useRef를 쓰는 버릇? 을 길러봐야겟다..