2021-05-06 :: Todo Project1

reactjs.org/docs/refs-and-the-dom.html

Refs and the DOM – React

ref에 접근하기 위해서는 .current를 이용 해 준다. id지정해줄 때 useRef로 많이 처리한다.

const id = useRef(4);
id.current +=1;

 

2번째 배열 인자에 꼭 들어가야하는 값들

const onSubmit = useCallback(e=> {
  onInsert(value);
  e.preventDefault();
},[onInsert, value]);

 

최상위 컴포넌트 App에 데이터를 state로 관리해준다. 또한 그 state를 조작하는 메서드 역시 App컴포넌트에 정의 해 준다.

const onInsert = useCallback(text=>{
  const newTodo = {
    id:id.current,
    text:text,
    checked: false
  }
  setTodos(todos.concat(newTodo));
  id.current +=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]);

 

배열 관련 메서드를 사용할 때 왜 중괄호가 아닌 소괄호를 사용하는지

즉시 실행 함수화 하기 위해서

{todos.map((todo)=>(
  <TodoItem 
     todo={todo} 
     key={todo.id}
     onRemove={onRemove}
     onToggle={onToggle}
  />
))}

 

수정 작업을 진행할 때 굳이 map을 사용해서 일일히 다 탐색하는건지 findindex로 접근해서 해결하는 방법은 잘 사용하지 않는건가

불변성 유지에 대한 여러 방법이 존재한다.

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

 

아래와 같이 사용하는 이유는 인자를 전달해 주기 위해서인가 아님 다른 이유가 있어서 인가

<div className="remove" onClick={()=>onRemove(id)}>