230711 React Todolist 복습

Root Folder:
YJ-github\GMA\YJ-React\230711\todolist

🍀 useRef():

-> DOM 안에 특정 노드 요소(태그)에 접근해 해당 태그를 컨트롤하게 만들어주는 함수
-> 컴포넌트 안의 변수로 활용&적용할 때 사용 가능

🍀 메서드 함수 안의 콜백 함수 사용 시 단문일 경우 소괄호 사용!!! (중괄호 사용금지)

ex)
TodoList.js

const getSearchResult = () => {
    return search === ""
    ? todo : todo.filter((it) =>
    {it.content.toLowerCase().includes(search.toLowerCase()))}
    // ↑ 중괄호 사용 시 오류 발생 
    (it.content.toLowerCase().includes(search.toLowerCase())))
  }

🍀 Props로 가져온 함수 사용할 때 인자값 유무에 따른 표현 차이

ex)
TodoItem.js

const onChangeCheckbox = () => {
    onUpdate(id);
  }
  // 함수를 따로 정의하지 않고 input 안에 직접적으로 화살표 함수를 사용해도 됨
  // <input onChange={() => onUpdate(id)} />
  // 위는 onUpdate() 함수에 인자값을 사용하기 위함
  // <input onChange={onUpdate} />
  // 인자값이 없다면 위처럼 사용 가능
  const onClickDelete = () => {
    onDelete(id);
  }

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

❗ ❗ 에러 발생

Warning: Each child in a list should have a unique "key" prop.

TodoList.js

<TodoItem key={it.id} {...it} />

TodoItem에 key를 할당하여 해결

하지만 왜인지 모름
왜..이래야하죠
그래서 찾아본 결과 ↓

Key 값이 뭔가요?

key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열이다.
key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는데에 도움을 준다.

Key 값이 왜 필요한가요?

지금 구현한 기능은 단순히 map을 통한 나열이지만, 이 key값이 없으면, 추후에 댓글 수정, 삭제 등을 할 때에 어떤 요소를 의미하는지를 컴퓨터가 확인하기 어렵기 때문에 고유의 key 값을 주는 것이 중요하다.

참고링크: https://velog.io/@jiwonyyy/React-key-%EA%B0%92%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%9C-%EC%9D%B4%EC%9C%A0-Warning-Each-Child-in-a-list-should-have-a-unique-key-prop

해결 완료!!

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

최적화 관리
-> 항상 마지막
-> context / useReducer / Redux
-> 상태변화 함수 및 코드를 최소화하고, 코드 관리

🍀 useMemo()

참고링크:
https://velog.io/@jinyoung985/React-useMemo%EB%9E%80

// useMemo() 사용 예문
const value = useMemo(() => {
    return calculate();
},[item])

-> 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하게 한다.

💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨💨

❔ 복습하다 생긴 궁금점들 ❔

react는 js와 다르게 함수 안 return문이 많이 쓰이는 듯한데..(아래 예시 참고) 아님 js에서도 써야하는 상황인데 내가 모르는 걸지도? => return문에 대해 더 공부해야 할 듯

아래 링크 참고하자
https://helicopter55.tistory.com/2

const onUpdate = (targetId) => {
    setTodo(todo.map((it) => {
      if(it.id === targetId) {
        return {
          ...it,
          isDone: !it.isDone
        }
      } else {
        return it
      }
    }
    ))
  }

  const getSearchResult = () => {
    return search === "" ? todo : todo.filter((it) => {
      
    })
    }
  }