React - Udemy

#443
선택한 아이템 삭제하기

const removeIngredientHandler = (ingredientId) => {
  setUserIngredients((prevIngredients) => 
       prevIngredients.filter(
    	   (ingredient) => ingredient.id !== ingredientId
    	)
     );
}

전의 값을 가지고 와 조건에 부합하지 않으면 버린다 -> 해당 값들로 업데이트 해주기

const query =
      enteredFilter.length === 0
        ? ""
        : `?orderBy="title"&equalTo="${enteredFilter}"`;
    fetch(
      "API주소" + query
    )

firbase에서 필터기능을 제공해주기 때문에 위와 같이 쓸 수 있다

---

#447 useCallback

  const filteredIngredientsHandler = useCallback((filteredIngredients) => {
    setUserIngredients(filteredIngredients);
  }, []);

캐싱되어 다시 렌더링이 되더라도 값이 남아있도록 해준다

https://github.com/facebook/react/issues/10231#issuecomment-316644950

console.log(name); // prints name state, e.g. 'Manu'
setName('Max');
console.log(name); // ??? what gets printed? 'Max'?
name 상태에 setName('Max'); 다음에 엑세스하면 새로운 값(예: 'Max') 이 나올것 같지만 사실 그렇지 않습니다. 명심하세요. 새 상태 값은 다음 구성 요소 렌더링 주기에서만 사용할 수 있습니다. (setName() 호출 시 스케줄됨).

---

reducer -> 여러개의 입력을 받아 하나의 결과를 반환하는 함수
useReducer -> 어떤 식으로 상태를 변경할 건지 정의할 수 있게 해준다