Gatsby와 함께 Netlify 양식을 사용하는 방법

이 문서에서는 Gatsby 및 Netlify 에 대한 기본 지식이 있다고 가정합니다.

어떻게 합니까?

Netlify의 내장 양식 처리를 Gatsby와 함께 사용하는 것은 간단하고 직관적이어야 하지만 슬프게도 그렇게 간단하지 않습니다.
문서에 자세히 나와 있지 않은 몇 가지 추가 구성이 필요합니다. 시작하겠습니다!

일반적으로 양식 태그에 Netlify 속성이나 data-netlify="true"를 추가하기만 하면 나머지는 Netlify가 알아서 처리합니다. Gatsby로 애플리케이션을 만드는 경우에는 그렇지 않습니다.Netlify가 실제로 양식을 볼 수 있도록 하려면 구성 요소가 렌더링될 때 양식 코드가 있을 구성 요소에 대한 참조를 만들어야 합니다. 이와 같이 생성자에서 구성 요소를 참조하는 것만 큼 간단합니다.

constructor(props) {
    super(props)
    this.ContactForm = React.createRef()
    this.state = {
      name: "",
      email: "",
      message: "",
    }
  }

그 이유는 Gatsby가 런타임 중에 렌더링되지 않고 대신 빌드 시간 동안 HTML 콘텐츠를 생성하기 때문입니다.
이 시점에서 사용자가 양식에 추가할 정보는 개체 형태가 됩니다. POST 요청에서 이 객체를 전달하려면 이 객체를 쿼리 문자열 매개변수로 변환해야 합니다. 제출 함수에서 나중에 사용할 수 있도록 생성자 아래에 아래 스니펫을 추가하세요.

encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&")
  }

이렇게 하면 개체가 변환될 뿐만 아니라 전달하는 키/값 쌍도 인코딩됩니다.

거의 다 왔습니다. 몇 단계만 더 하면 됩니다!

다음 부분은 실제로 양식 제출을 처리하는 함수를 만드는 것입니다. 먼저 위의 몇 단계에서 양식 참조를 저장할 변수를 만듭니다. 그런 다음 이와 같이 HTTP 요청 본문 내부에 생성한 이 변수를 전달합니다.

handleSubmit = event => {
    event.preventDefault()
    const form = this.ContactForm.current
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: this.encode({
        "form-name": form.getAttribute("name"),
        ...this.state,
      }),
    })
      .then(() => navigate("/"))
      .catch(error => alert(error))

    this.setState({
      name: "",
      email: "",
      message: "",
    })
  }

마지막 부분은 양식에 대한 코드를 작성하고 위에서 설명한 대로 양식 태그에 Netlify 속성 또는 data-netlify="true"를 포함하는 것입니다.
HTTP 요청이 방금 생성한 양식을 찾을 수 있도록 form 태그에 name 속성도 포함하는 것을 잊지 마십시오.
그리고 그게 다야!
Netlify에서 사이트 대시보드의 양식 탭에서 이러한 양식에 대한 모든 제출을 찾을 수 있습니다.

이 기사가 도움이 되었기를 바라며, 재미있게 보셨다면 제가 작성한 다른 기사articles도 확인해 보세요!