React에서 연락처 양식을 만드는 방법"초보자에게 어울리는 js"

연락처는 모든 사이트의 가장 중요한 구성 부분이다.🗣
 
알고 있었어?
 
니가 여기 온 건 표가 얼마나 중요한지 알기 때문이야.나는 네가 하나를 만들고 싶다고 추측한다.
어서 오세요. 오늘 우리는 Reactjs를 사용하여 폼을 만드는 법을 배울 것입니다.
다음은 우리가 구축하고자 하는 내용: React-form.
그것은 매우 간단하고 화려한 사용자 인터페이스가 없으며, 왠지 쓸모가 없다.
GitHub 재구매 계약: github.com/aminequ/react-form
선결 조건:

무상태 구성 요소에 대한 기본 지식

CSS/SAss의 기본 사항

이렇게시작하자.

환경을 조성하다.
npm나 실을 사용하여react 프로젝트를 만듭니다.둘 다 효과가 있다.npx create-react-app form아니야, 거짓말 안 했어!npx와 npm는 같다. 
사전 처리기로 Sass를 사용할 예정입니다.나는 어떤 스타일로도 너를 방해하지 않을 것을 보증한다.
다음과 같이 설치node-sass:npm install node-sass좋아하는 코드 편집기를 사용하여 항목을 열고 기본 불필요한 파일을 삭제합니다.만약 네가 지금까지 이렇게 한 적이 없다면, 다음은 방법이다. 그렇지 않으면 너는 이 부분을 뛰어넘을 수 있다.
다음을 삭제합니다.App.test.js reportWebVitals.js setupTests.js App.js/App.css/index.js/index.css에서 기본 코드와 스타일 제거App.js는 빈 div의 응용 프로그램 함수만 포함해야 한다.
현재 src 폴더에 새 폴더를 만들고 'components' 라고 명명한 다음 새 구성 요소를 만들고 Form.js 라고 명명합니다.또한 스타일시트를 만들고'formStyle.scss'라고 명명합니다.
로컬 서버를 시작하려면:npm start
스타일 업.
내가 전에 말했잖아. 별거 아니야. 하지만 모든 스타일을 설명해 달라고 하면 언제든지 댓글을 남겨줘.이제 GitHub repo에서 스타일을 복사해서 놓을 위치에 놓으면 됩니다 (formStyle.scss)😎

표를 인코딩합시다.
다음에 작성된 코드 자습서는 간혹 까다로울 수 있지만 제가 도와드릴 테니 Form.js 구성 요소에서 다음 코드를 작성하십시오.

import React from 'react'
import './formStyle.scss'

function Form() {
   return(
      <div className="container">
   </div>
 )
}
export default Form

react와 스타일을 가져오고'Form'이라는 무상태 함수를 만들었습니다.함수는 'container' 라는 클래스를 되돌려줍니다.
컨테이너 내에서 계속하고 다음을 수행합니다.
연락처가 있는 <h1>를 추가합니다.
폼 요소를 만들고'form'이라고 명명합니다.
"name"이라는 클래스를 만듭니다. div이것은 이름과 성 필드의 용기를 충당할 것입니다.
속성이 <label>인 for="firsrName" 표시를 추가합니다.
레이블에 대한 다음 쿼트를 봅니다.

…This is the most important element if you want to build accessible forms - when implemented properly, screenreaders will speak a form element's label along with any related instructions, as well as it being useful for sighted users.

그러나 항상 "for"속성을 포함하는 것을 기억하십시오.
다음과 같은 속성을 가진<input> 요소를 추가합니다.type="text" name="firstName" className="firstName" tabIndex="1"폼에 접근할 수 있도록 "tabIndex"속성을 설정했습니다. 사용자가 기본 순서 요소가 아닌 폼에서 원하는 순서대로 폼을 만들 수 있도록 도와줍니다. 
이 예에서, 우리는 첫 번째 이름을 제시했는데, 이것은 사용자가tab을 통해 진행하는 첫 번째 입력이 될 것이라는 것을 의미한다.
이제 성을 반복하여 다른 및 요소를 만듭니다.같은 속성을 놓지만 단어'first'를'last'로 바꾸고 thetabeIndex 속성 값'2'를 줍니다.
출력 코드:

<div className="container">
  <h1>Contact us</h1>

 <form className="form">

    <div className="name">

       <label for="firstName">First name</label>
       <input
            type="text"
            name="firstName"
            className="firstName"
            tabIndex="1"
       />
       <label for="lastName">Last name</label>
       <input
            type="text"
            name="lastName"
            className="lastName"
            tabIndex="2"
       />
    </div>
 </form>
</div>

전자 우편 입력 필드를 만듭니다.

<label for="email">Email</label>
<input
     type="email"
     name="email"
     id="email"
     className="email"
     placeholder="[email protected]"
     tabIndex="3"
/>

새로운 것은 거의 없습니다. <label> 속성과 for 속성을 추가했습니다. 값은 '이메일' 과 '이메일' 문자열입니다.다음에 거의 같은 속성을 추가합니다 <input>.
우리는 메일에 tabeIndex의 "3"을 입력했기 때문에 이것은 사용자가 통과할 세 번째 필드입니다.
메시지 입력을 살펴보자. 그것은 하나의 요소가 아니라 하나의 요소이다.차이는 무엇입니까?간단해.
한 줄의 텍스트 필드를 원할 때, 이름과 전자메일처럼 사용합니다.여러 줄 텍스트에 사용됩니다.여기서 메시지는 한 마디, 한 마디 또는 구직서 한 통일 수 있다.
나는 보통 이런 의미 제시와 다른 전방 개발 기교를 내 것과 위에 발표한다.나는 네가 나를 따라 유용한 내용으로 너의 요점을 채워 줄 것을 초청한다.
for 속성과 메시지 텍스트가 있는 <label>를 추가합니다.속성이 <textarea> 인 name/className/placeholder 표시를 추가합니다. 
출력 코드:

<label for="message">Message</label>

<textarea
  placeholder="Start typing..."
  className="message"
  name="message"
/>

캐시에 있는 체리가 될 제출 단추를 추가합니다. 
submit 유형, 클래스 이름이 "send"인 요소를 만듭니다.

<button type="submit" className="send">Send</button>

모든 물건을 다 놓았는지 확인하고, 목록이 실시간 버전과 같은지 확인하세요
오류가 발생하면 출력 코드를 되돌려 확인하거나 환매 프로토콜의 코드를 참고하십시오. 
모든 것이 다 좋아요?

useRef()를 사용하여 기능화
사용자가 제출한 데이터를 가져와 대상에 저장한 다음 처리할 수 있을 때만 우리의 폼이 작동합니다.
우선 useRef() 갈고리의 정확한 의미를 알아보자.간단히 말해서, 갈고리는 클래스를 작성하지 않은 상태에서React 특성을 사용할 수 있도록 합니다.useRef () 가 바로 이러한 특성 중의 하나입니다. 
할 수 있다!useRef () 의 이 기능은 무엇입니까?

Refs provide a way to access DOM nodes or React elements created in the render method.

useRef()는 useState()를 대체할 수 있습니다.그것의 행동은useState () 와 완전히 같습니다. 단지 최신 동작은useRef () 를 터치할 뿐입니다.
useRef는current라는 속성의 대상을 되돌려줍니다. 갈고리가 가리키는 현재 노드나 요소를 가리킵니다.몇 초 후에 너는 이 점을 알게 될 것이다. useRef() 갈고리를 사용하기 위해서는 우선useState와 다른 갈고리처럼 가져와야 합니다.import React, { useRef} from 'react'다음은 구문입니다.const whereWeStoreInputValue= useRef(initialValue)우리들은 그것을 우리의 표에 실현시킬 것이다. 
양식 구성 요소에 다음 변수를 작성합니다. 물론 JSX에서는 작성할 수 없습니다. 
모든 입력에는 반드시 자신의 변수가 있어야 한다.

const firstNameRef = useRef(null)
const lastNameRef =  useRef(null)
const emailRef = useRef(null)
const messageRef =  useRef(null)

시작할 때 어떤 값도 사용하지 않기를 원하지 않기 때문에, 우리는null을 초기 값으로 사용합니다.빈 문자열로 대체할 수 있습니다.
현재 우리는 폼 입력을 되돌려주고 ref={} 속성을 추가해야 한다.
표의 입력마다 변수가 있는ref 속성을 추가합니다. 
예를 들어 Firstname을 담당하는 필드는 다음과 같은 속성을 가질 수 있다ref={firstNameRef}이것은useRef 변수를 정확한 요소와 연결합니다.이해했어?
이제 폼의 제출을 처리할 함수를 만듭니다.검색한 데이터를 포함하고 대상에 저장하는 함수를 만들고 싶습니다. Form 구성 요소 내부와 우리가 전에 만든 네 변수의 바로 아래에 인코딩합니다.

const handleSubmit = (event) => {
      event.preventDefault()

      const data = {
            firstName: firstNameRef.current.value,
            lastName: lastNameRef.current.value,
            email: emailRef.current.value,
            message: messageRef.current.value
            }
      alert("tadaaa!: \n" + JSON.stringify(data) + "Your data 😎")
}

이 함수는 이벤트를 매개 변수로 합니다."이벤트"와 알려진 방법인 "prevent Default"을 사용하여 브라우저가 목표 요소의 기본 행동을 실행하지 못하게 합니다. 예를 들어 페이지를 새로 고침하고 있습니다. 
다음에 우리는 네 개의 속성을 가진 대상을 만들었는데, 각 속성은 목표 요소의 현재 값에 대한 인용을 포함한다. 
예를 들어 위 코드에서 우리는 ref={firstNameRef}를 이름 입력에 넣고 대상 데이터에서 인용할 것이다.firstName: firstNameRef.current.value본 논문의 범위 내에서 우리는 사용자에게만 데이터 경보를 반송할 것이다.🤷‍♂️ 
모든 것이 정상인지 다시 한 번 검사해라. 만약 그렇지 않다면, 네가 놓쳤다고 생각하는 곳으로 돌아가라.
 
이것이 바로 이 부분이다.다음 글은 사용자 입력을 data 대상에게 전달하기 전에 이를 검증하는 방법을 보여 줍니다.
만약 당신이 새로운 것을 배웠다고 생각한다면, 이 글을 공유하고, 누군가가 어딘가에서 그것을 찾는다.그들은 네가 그들의 구원자라고 생각해서 너에게 감사할 것이다. 
안녕히 계세요.