반응형 React15 [React] react-hook-form 사용하기 React-hook-form왜 기존 form 사용 대신 이걸 쓰는게 더 편리한지 어떤 장점이 있는지 찾기 제어 컴포넌트 우리는 React state를 “신뢰 가능한 단일 출처 (single source of truth)“로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다.출처 : 리액트 공식문서 제어 컴포넌트 제어 컴포넌트는 리액트에 의해 값이 제어되는 입력 폼 엘리먼트를 뜻한다. 제어 컴포넌트는 실시간으로 값이 동기화 되는 특징이 있다. 기존 리액트에서 input값을 받아올 때 아래 .. 2024. 8. 13. [React] react-hook-form useRef 사용 보통 javascript 에서는 getElementById , querySelector 같은 DOM Selector 함수 사용해서 DOM 선택 리액트는 ref 이용해서 DOM 선택 특히 자주 쓰이는 함수형 컴포넌트는 useRef 사용 DOM을 직접 선택해야 할 경우들 1. 엘리먼트 크기를 가져와야 할 때2. 스크롤바 위치를 가져와야 할때3. 엘리먼트에 포커스 설정 해줘야 할때 등등 ** useRef를 이용해서 어떻게 password와 password confirm이 같은지 알 수 있는걸까? 흐름은 이렇게 됨 1. ref 생성 2. watch를 이용해서 password 필드 값 가져오기 const password = useRef();password.current = watch("password").. 2024. 8. 13. 화살표 함수 구문에 대해 자세히 알아보기 화살표 함수를 다룰 때는 '구문 단축키'를 사용할 수 있습니다.가장 중요한 것은 다음과 같은 대안에 대해 알고 있어야 한다는 것입니다.1) 매개변수 목록 괄호 생략하기화살표 함수가 정확히 하나의 매개변수만 사용하는 경우, 묶는 괄호를 생략할 수 있습니다.(userName) => { ... }가 아니라userName => { ... }라고 쓸 수 있습니다.참고 하세요:함수에 매개변수가 없는 경우에는, 괄호를 생략해서는 안 됩니다.() => { ... } 라고 써야 옳습니다.함수가 둘 이상의 매개변수를 받는 경우에도 괄호를 생략해서는 안 됩니다.(userName, userAge) => { ... } 라고 써야 합니다. userName, userAge => { ... } 라고 쓰면 안 됩니다.2) 함수 본문 .. 2023. 10. 21. 이전 1 2 3 4 다음 728x90 반응형
