1. firebase.js 만들기

왼쪽 메뉴바에서 톱니바퀴를 클릭하고, 프로젝트 설정에 들어가면

이런 코드가 나오는데 저기서 firebaseConfig 내용을 복사한다.

firebase.js이름의 파일을 하나 만들고

import firebase from 'firebase';

var firebaseConfig = {
  ...
};

firebase.initializeApp(firebaseConfig);

export default firebase;

이렇게 작성 한다.

그리고 firebase를 사용할 파일에서

import firebase from './FireBase';

를 추가한다.

2. CREATE

user와 age정보를 입력해서 생성하게 만들었다.

const FirebaseDB = () => {
  const [datas, setDatas] = useState([]);
  const [user, setUser] = useState('');
  const [age, setAge] = useState('');
  const userRef = firebase.database().ref('users');

  const onChange = (e) => {
    e.target.name === 'user' ? setUser(e.target.value) : setAge(e.target.value);
  }

  const onClickAdd = () => {
    const userData = { user, age };

    userRef.push(userData);
    setUser('');
    setAge('');
  }

  return (
    <div>
      <input onChange={onChange} name='user' placeholder='user' value={user}></input>
      <input onChange={onChange} name='age' placeholder='age' value={age}></input>
      <button onClick={onClick}>추가하기</button>
    </div>
  );
};

export default FirebaseDB;

firebase와 연동하는 작업을 먼저 한다.
firebase.database().ref()를 사용하는데 firebase가 NoSQL기반이라 ref()의 괄호 안에는 collection 이름을 써주면 된다.

3. READ

...
  useEffect(() => {
    userRef.on('value', snapshot => {
      const users = snapshot.val();
      const usersData = [];
      for(let id in users) {
        usersData.push({ ...users[id], id });
      }

      setDatas(usersData);
    })
  }, []);

...

  return (
    <div>
      {datas?.map(data => <div key={data.id}>
        <div>
          이름: {data.user}
          <br />
          나이: {data.age}
        </div>
        <button onClick={() => onUpdate(data.id)}>수정</button> <button onClick={() => onClickRemove(data.id)}>삭제</button>
        <hr />
      </div>
      )}
...

on()을 이용해서 데이터들을 가져와 state에 넣는다.
데이터를 추가할 때 임의의 id가 부여되는데 이것으로 나중에 수정, 삭제를 하기 위해
그 id값도 불러올 때 추가해서 넣어주었다.
그리고 map()으로 데이터들을 간단하게 표시한다.
수정과 삭제 버튼을 미리 만들어 놓았다.

4. UPDATE

...
  const onUpdate = (id) => {
    const [user] = datas.filter(el => el.id === id);

    userRef.child(id).update({
      age: user.age++
    });

    setDatas(datas.map(el => el.id === id ? {...el, age: el.age++} : el));
  };
...

특정 값을 업데이트 하기 위해 id를 인자로 받아서 해당 객체를 user에 할당하고,
update()를 이용해 특정 id의 내부값만 바꿔준다.
state도 같이 바꿔줘주지 않으면 제대로 동작하지 않는다.

5. DELETE

...
  const onClickRemove = (id) => {
    userRef.child(id).remove();
  }
...

삭제도 id를 인자로 받아서 remove()만 호출해주면 된다.

6. 최종 결과 코드

import React, { useEffect, useState } from 'react';
import firebase from './FireBase';

const FirebaseDB = () => {
  const [datas, setDatas] = useState([]);
  const [user, setUser] = useState('');
  const [age, setAge] = useState('');
  const userRef = firebase.database().ref('users');

  useEffect(() => {
    userRef.on('value', snapshot => {
      const users = snapshot.val();
      const usersData = [];
      for(let id in users) {
        usersData.push({ ...users[id], id });
      }
  
      setDatas(usersData);
    })
  }, []);

  const onChange = (e) => {
    e.target.name === 'user' ? setUser(e.target.value) : setAge(e.target.value);
  }

  const onClickAdd = () => {
    const userData = { user, age };

    userRef.push(userData);
    setUser('');
    setAge('');
  }

  const onClickRemove = (id) => {
    userRef.child(id).remove();
  }

  const onUpdate = (id) => {
    const [user] = datas.filter(el => el.id === id);

    userRef.child(id).update({
      age: user.age++
    });

    setDatas(datas.map(el => el.id === id ? {...el, age: el.age++} : el));
  };

  return (
    <div>
      {datas?.map(data => <div key={data.id}>
        <div>
          이름: {data.user}
          <br />
          나이: {data.age}
        </div>
        <button onClick={() => onUpdate(data.id)}>수정</button> <button onClick={() => onClickRemove(data.id)}>삭제</button>
        <hr />
      </div>
      )}
      <input onChange={onChange} name='user' placeholder='user' value={user}></input>
      <input onChange={onChange} name='age' placeholder='age' value={age}></input>
      <button onClick={onClickAdd}>추가하기</button>
    </div>
  );
};

export default FirebaseDB;