firebase를 이용하여 데이터 주고받기

GET

useEffect(() => {
    setIsLoading(true);
    fetch("url.../meetups.json")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        const meetups = [];

        for (const key in data) {
          const meetup = {
            id: key,
            ...data[key],
          };

          meetups.push(meetup)
        }

        setIsLoading(false);
        setLoadedMeetups(meetups);
      });
  }, []);

• fetch API를 컴포넌트 안에서 바로 사용할경우 상태가 변하면 리렌더링이 되기때문에 무한루프에 빠지게된다.
  따라서 useEffect 훅을 이용하여 처음 렌더링 되었을때만 fetch API가 동작하도록 만들어준다.
• firebase에서 제공하는 API 끝에 /카테고리.json을 꼭 붙여준다.
• .json() 메서드를 통해 데이터를 가공하면 아래와 같은 형식의 데이터가 들어온다.
  
• 따라서 내가 원하는 형식으로 한번 더 가공해주고, useState 훅을 이용하여 state을 바꿔준다.

.then((data) => {
        const meetups = [];

        for (const key in data) {
          const meetup = {
            id: key,
            ...data[key],
          };

          meetups.push(meetup)
        }

        setIsLoading(false);
        setLoadedMeetups(meetups);
      })

POST

const addMeetupHandler = (meetupData) => {
    fetch("url.../meetups.json", {
      method: "POST",
      body: JSON.stringify(meetupData),
      headers: {
        'Content-type': 'application/json'
      }
    })
  	.then((res) => res.json())
  	.then((data) => setLoadedMeetups((prev) => [...prev, { id: data.name, ...meetupData }]))
    .then(() => {
      history.replace('/');
    })
  };

• GET요청을 할때는 GET이 기본값으로 들어가기때문에 fetch의 두번째 인자를 생략해도 됬지만,
  POST는 위와같이 객체의 형식으로 두번째 인자를 할당해야한다.
• POST요청이 끝나면 첫 페이지로 이동하도록 만들어준다.

<NewMeetupForm onAddMeetup={addMeetupHandler} />

const submitHandler = (e) => {
    e.preventDefault();

    const enteredTitle = titleInputRef.current.value;
    const enteredImage = imageInputRef.current.value;
    const enteredAddress = addressInputRef.current.value;
    const enteredDescription = descriptionInputRef.current.value;

    const meetupData = {
      title: enteredTitle,
      image: enteredImage,
      address: enteredAddress,
      description: enteredDescription,
    }

    props.onAddMeetup(meetupData);
  };

• POST요청 함수를 prop을 통해 form 컴포넌트로 전달하고, form이 submit 되었을때 POST 요청 함수가 실행되도록 한다.

DELETE

const removeIngredientHandler = (ingredientId) => {
    fetch(
      `url.../${ingredientId}.json`,
      {
        method: "DELETE",
      }
    ).then(() => {
      setUserIngredients((prevIngredients) =>
        prevIngredients.filter((ingredient) => ingredient.id !== ingredientId)
      );
    });
  };

fetchAPI 인자의 엔드포인트와 .json 사이에 삭제하고자 하는 id를 전달한다.
이후 setState을 이용해 삭제된 데이터를 제외한 화면을 렌더링 해준다.