CRUD

추가 : concat 혹은 스프레드 연산자 수정 : map + 스프레드 연산자 삭제 : filter 검색 : filter + indexOf 목록 뿌리기 : map 배열의 중간 요소 추가 : slice + 스프레드 연산자 [출처] 5. 리엑트 중요함수 정리 및 불변성 예제|작성자 getinthere

실습

import { useState } from "react";
import foodLike from "./models/foodLikes";

function App() {
  // 상태로 관리해야한다!!!
  const [foods, setFoods] = useState(foodLike);

  // 삽입
  const add = () => {
    let newFoods = [
      ...foods,
      {
        id: 6,
        name: "banana",
        image:
          "<http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg>",
      },
    ];
    setFoods(newFoods);
  };
  // const 쓰는 이유 : 컴파일 시 한번만 읽음

  // 삭제
  const deleteFood = () => {
    // fetch 요청!! ok 떨어지면 밑에꺼 실행
    let newFoods = foods.filter((food) => food.id !== 2);
    setFoods(newFoods);
  };

  // 수정
  const updateOne = () => {
    // id : 1 데이터 name -> tomato 로 변경
    // 삭제하고 새로 값 추가하는 형태로 수정했음
    let delKimchi = foods.filter((food) => food.id !== 1);

    console.log("나 어디까지 왔니");

    let updateOne = [
      ...delKimchi,
      {
        id: 1,
        name: "tomato",
        image:
          "<http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg>",
      },
    ];

    setFoods(delKimchi);
    setFoods(updateOne);

		// 스앵님의 풀이
		let updateFoods = foods.map((food) => {
      if (food.id === 1) {
        return { ...foods[0], name: "tomato" };
      } else {
        return food;
      }
    });
    setFoods(updateFoods);
  };

  return (
    <div>
      <h1>{foodLike[0].name}</h1>
      <h3>{JSON.stringify(foods)}</h3>
      <hr />
      <button onClick={add}>한건추가</button>
      <button onClick={deleteFood}>한건삭제</button>
      <button onClick={updateOne}>한건수정</button>
      <ul>
        {foods.map((f) => (
          <li key={f.id} name={f.name}>
            {f.id} : {f.name}
          </li>
        ))}
      </ul>
    </div>
  );
} //

export default App;

https://nomadcoders.github.io/movie_app_2019/#/

https://github.com/nomadcoders/movie_app_2019/blob/master/src/components/Movie.css