반응 양식 및 useRef Hook

그래서 지난 기사에서 우리는 react의 useState와 useEffect 후크에 대해 알게 되었습니다. 이번에는 Forms가 무엇이고 useRef hook이 실제로 작동하는지 배우면서 조금 더 깊이 들어가 보겠습니다. 나는 또한 소품 드릴링의 보너스를 던졌습니다.

TOC

1. Forms
2. UseRef Hook

양식

이제 JavaScript를 배웠다면 양식이 무엇이고 어떻게 사용하는지 이미 알고 있을 것입니다. 그러나 JavaScript의 기초만으로 React에 뛰어들었다면 새로운 개념을 배우는 데 도움이 될 것입니다.
따라서 기본적으로 형식은 이름에서 알 수 있듯이 공식 설정에서뿐만 아니라 하드카피에서도 자주 볼 수 있는 형식입니다. 우리는 전통적인 형태의 텍스트 영역, 체크 박스를 가지고 있습니다. 웹 형식에서는 버튼, 라디오 버튼, 드롭다운 등을 사용하여 가능성이 높아집니다.
양식은 onClick 또는 onSubmit 이벤트를 사용하여 제출됩니다. 버튼과 상호 작용할 때 기본적으로 양식은 출력을 즉시 표시하고 구성 요소를 다시 렌더링합니다. 그런 일이 발생하지 않도록 하려면 다음을 사용해야 합니다.e.preventDefault 양식 처리기에서. 여기서 ''는 이벤트입니다.

function handleClick(e){
    e.preventDefault()
    //rest of the code
}

onClick 이벤트는 버튼 태그와 함께 사용하고 onSubmit은 양식 태그 자체와 함께 사용할 수 있습니다.

Tip:
If the keyname and the variable storing the data have same name, in ES6 we can just write once while passing the object. Ex-

const person= {firstName: firstName, email: email}
//is same as 
const person = {firstName, email}

기본적으로 양식은 다른 DOM 요소와 달리 일부 내부 상태를 유지하므로 제어된 입력 또는 구성 요소의 개념이 등장합니다.
제어된 입력 또는 구성 요소는 양식 제출에 사용되며 사용자가 입력한 데이터에도 액세스할 수 있습니다. 이를 사용하여 입력 값을 다른 UI 요소로 전달하거나 다른 이벤트 핸들러에서 재설정할 수 있습니다.
여러 입력을 처리해야 하는 경우 name 속성을 할당할 수 있고 그에 따라 핸들러 functikn이 작동할 수 있습니다.
매번 여러 입력을 사용할 수 있지만 좋은 방법은 아닙니다. 하나의 함수에서 처리할 수 있는 입력을 그룹화해야 합니다. Ex- 이름, 이메일, 나이를 입력하여 화면에 표시합니다.

그것이 형식의 기본입니다. 이 팁을 사용하여 코드를 보다 효율적으로 작성하십시오!

useRef 후크

형식에서 우리는 제어된 입력의 개념을 알고 있습니다. 그러나 앱에서 제어되지 않는 입력과 구성 요소를 사용할 수도 있습니다. 따라서 useRef 후크는 클러치에 들어 있습니다.

후크는 useState와 같은 렌더링 사이에 값을 유지합니다. 그러나 useState와 같은 재 렌더링을 트리거하지 않습니다.

이 훈의 가장 인기 있는 용도는 DOM 노드와 요소를 대상으로 하는 것입니다. JavaScript에서 querySelector가 하는 것과 유사한 것.

후크는 일부 컨테이너에 할당되어야 합니다.

const refContainer = useRef(initial value)

'ref' 키워드와 함께 컨테이너를 전달해야 합니다.

컨테이너는 'current' 속성을 가진 객체이므로 정확한 DOM 요소를 가져오는 데 사용할 수 있습니다.

한 가지 더 명심해야 할 점은 useRef가 하나의 HTML 요소로 제한되지 않는다는 것입니다.
useRef의 예는 아래와 같습니다.

const refContainer = useRef(null)
const divContainer = useRef(null)
const handleSubmit = (e) => {
 console.log(refContainer.current.value)
 console.log(divContainer.current)
}
const Example = () => {
return (
  <>
    <form onSubmit= {handleSubmit}>
      <div>
         <input type="text" ref={refContainer} />
      </div>
      <div ref={divContainer}> useRef is Awesome!</div>
    </form>
  </>
)
}
export default Example;

이것이 React Basics Part 3의 끝입니다. 이 시리즈의 다른 기사를 확인하십시오.
나는 이것들을 계속 추가할 것이다. 나에게 당신의 생각을 알려주고 내 및 .