어떤 애플리케이션을 구축하든 그 중심에는 데이터가 있습니다. 이 게시물에서는 Formik을 사용하여 간단하지만 기능적인 양식을 작성하고 데이터를 Firebase 데이터베이스에 저장하는 방법을 살펴보겠습니다. 이 예제에서는 React 기능 구성 요소를 사용하므로 React 프로젝트를 따라하거나 사용할 수 있습니다.

전제 조건

먼저 Firebase에서 프로젝트를 생성하거나 기존 프로젝트를 사용해야 합니다.

사용하려는 Firebase 프로젝트 내에 데이터베이스를 만들고(또는 기존 프로젝트를 사용하고) 쓰기 규칙을 true로 설정해야 합니다.

React 애플리케이션(Create React App 또는 기타 사용)

다음 패키지(npm i 대신 yarn add를 사용할 수도 있음):

$ yarn add firebase formik

Firebase 구성

Firebase dashboard에 도착하면 프로젝트에 들어가 코드 아이콘 을 눌러 구성 개체를 가져옵니다.



그러면 다음과 비슷한 것을 얻을 수 있습니다.

firebaseConfig.js

var firebaseConfig = {
    apiKey: "xxxxxxxx",
    authDomain: "firebaseformikproject-xxxxx.firebaseapp.com",
    projectId: "firebaseformikproject-xxxxx",
    storageBucket: "firebaseformikproject-xxxxx.appspot.com",
    messagingSenderId: "xxxxxxxxxxxxx",
    appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxx"
  };

이 개체를 사용하여 React 앱에서 Firebase를 구성합니다.

프로젝트 디렉토리/src에 firebaseConfig.js라는 새 파일을 만들고 개체를 붙여넣습니다.
다음으로 var를 let로 바꾸고 개체 외부에 export default firebaseConfig를 추가합니다.
index.js 또는 애플리케이션의 진입점으로 이동하여 ReactDOM.render() 위에 다음 줄을 추가합니다.

index.js

...
import { firebase } from '@firebase/app';
import firebaseConfig from './firebaseConfig';

firebase.initializeApp(firebaseConfig);

ReactDOM.render(
...

참고: firebaseConfig.js 파일이 index.js 파일과 같은 디렉토리에 있지 않으면 import 문에서 경로를 조정해야 합니다.

이제 애플리케이션 시작 시 Firebase가 초기화됩니다.

Formik 양식 추가

이제 Formik으로 간단한 양식을 만들어 보겠습니다. RegisterForm.js라는 새 파일을 만들고 현재 디렉터리에 저장합니다.

우리는 데이터베이스를 업데이트하기 위해 React, Firebase를 사용하고 양식을 처리하기 위해 Formik 후크를 사용할 것이므로 가져와야 합니다.

RegisterForm.js

import React from 'react'
import Firebase from 'firebase'
import { useFormik } from 'formik'

다음으로 초기 값과 onSubmit 메서드를 기능 구성 요소에 전달합니다. 사용자에게 이름, 사용자 이름 및 이메일을 작성하도록 요청합니다. 그런 다음 사용자가 제출을 클릭하면 해당 데이터를 Firebase 데이터베이스에 저장합니다.

RegisterForm.js

...
const RegisterForm = () => {

const formik = useFormik({
  initialValues: {
    firstName: '',
    username: '',
    email: '',
  },
  onSubmit: values => {
    let ref1 = Firebase.database().ref().child('users').push()
    ref1.set(values)
  },
});
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />

      <label htmlFor="username">Username</label>
      <input
        id="username"
        name="username"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.username}
       />

      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
 );
};

export default RegisterForm

짜잔! 등록 양식이 준비되어 작동 중입니다. Formik 도우미 함수handleChange 및 handleSubmit를 사용하여 코드를 깔끔하게 유지했습니다.

테스트를 해보고 싶다면 App.js를 열고 importRegisterForm.js를 컴포넌트로 사용해 보세요.

App.js

import RegisterForm from "./RegisterForm";

export default function App() {
  return (
    <div className="App">
      <RegisterForm />
    </div>
  );
}

Firebase 및 고유 ID

관계형 데이터베이스로 작업한 경우 일반적으로 기본 키인 각 항목의 ID에 익숙합니다. 즉, 고유하며 하나의 항목에만 참조할 수 있습니다.
Firebase에서 각 항목은 고유한 키를 가지므로 예제 항목은 다음과 같습니다.

users
  |_ -MEIwCAwrPBePyp4mVv1
        |_ firstName: "John"
        |_ username: "johnwayne"
        |_ email: "[email protected]"

각각의 새 항목은 이 고유 키를 가져오지만 이를 포착하여 한 사용자에 대한 모든 데이터와 함께 저장하려면 어떻게 해야 할까요? 간단합니다. onSubmit 메소드를 편집하기만 하면 됩니다.

RegisterForm.js

...
    onSubmit: values => {
    let ref1 = Firebase.database().ref().child('users').push()
    let key = ref1.key
    values.id = key
    ref1.set(values)
  },
...

먼저 ref1에서 키를 가져온 다음 해당 값을 값 개체에 넣습니다. 그러면 데이터베이스에 다음이 저장됩니다.

users
  |_ -MEIwCAwrPBePyp4mVv1
        |_ firstName: "John"
        |_ username: "johnwayne"
        |_ email: "[email protected]"
        |_ id: "-MEIwCAwrPBePyp4mVv1"

이 키를 사용하여 특정 자녀가 있는 특정 사용자를 찾고 타겟팅할 수 있습니다.

Formik은 효율적인 양식을 만들기 위한 훌륭한 도구이며 firebase는 빠른 설정 및 인증 옵션을 제공하고 github 작업을 통해 배포도 쉽게 설정할 수 있습니다.

읽어 주셔서 감사합니다!