React Hook Form 공부 - 6 커스텀 Validation 함수 만들기React-Hook-Form이 제공하는 유효성 검증 방법 말고 개발자가 직접 Validation을 만들 수 있는데요. 바로 register 함수에서 두 번째 인자로 전달했던 그 객체 안에 validate 항목을 추가하면 됩니다 email 부분에 커스텀 validation 로직을 구현해 보겠습니다. "admin@fly.dev" 라는 이메일로는 가입을 하지 못하게 해 볼까요? { return fieldValue !== 'admin@fly.dev' || 'You can not use admin@fly.dev!' }, })}/> validate 항목은 함수인데요. 위와 같이 OR(||) 연산자를 사용합니다. OR 연산..

React Hook Form 공부 - 5 에러 메시지 표현하기에러 메시지를 표시하기 위해 React-Hook-Form에서 제공해 주는 게 바로 formState 객체인데요. 실제는 formState 안에 있는 errors 객체가 최종적으로 우리가 사용하는 겁니다. const { register, control, handleSubmit, formState } = useForm();const { errors } = formState;// 아래가 축약버전const { register, control, handleSubmit, formState: { errors }, } = useForm(); 이제 form 태그에 p 태그를 덧붙혀 보겠습니다.{errors.user..

React Hook Form 공부 - 4 유효성 검증(Validation)Form의 유효성 검증으로 React-Hook-Form이 제공하는 방법은 다음과 같습니다.총 6개 제공requiredminLength & maxLengthmin & maxpattern register 함수의 두 번째 인자로 들어갈 객체 안에 넣어주면 됩니다.먼저, 위와 같이 form에 noValidate 옵션을 주어서 HTML 기본적으로 유효성 검증하는 기능을 끄겠습니다.이렇게 하면 유효성 검증은 오로지 React-Hook-Form이 담당하게 됩니다.required 유효성 검증을 시현해 보겠습니다. register 함수 안에 넣는 인자 중 에 두 번째 인자로 객체를 넣어주고 그 안에 required 항목을 넣어주면 됩니다.그러면 아..

React Hook Form 공부 - 3 React-Hook-Form의 onSubmit 핸들러 제어 방법 보통 리액트에서는 form-submit 처리를 handleSubmit라는 이름의 함수를 만들어서 사용하는데요. react-hook-form에서도 이 이름의 함수를 사용합니다. 대신 handleSubmit 함수에는 사용자가 작성한 함수를 인자로 넣어줘야 합니다. const { register, control, handleSubmit } = useForm();const onSubmit = (data) => { console.log("Form submitted.", data)}renderCount++; return ( Render count : {renderCount / 2} ..

React Hook Form 공부 - 2 React-Hook-Form의 Devtool 설치하기 npm i -D @hookform/devtoolsyarn add -D @hookform/devtools 적용법useForm() 이 사용되는 곳에 아래와 같이 Devtool 컴포넌트를 삽입하면 됩니다.import { useForm } from 'react-hook-form'import { DevTool } from '@hookform/devtools'let renderCount = 0export default function MyForm() { const { register, control } = useForm() renderCount++ return ( Render count : {ren..

React Hook Form 공부 - 1 설치npm i react-hook-formyarn add react-hook-form  useForm 사용하기react-hook-form과 HTML의 form 요소인 input과 button 등을 연결 시켜주는 함수가 바로 register 함수입니다. import { useForm } from "react-hook-form";export default function MyForm() { const form = useForm(); const { register } = form; // 한 줄로 쓰려면 아래와 같이 하셔도 됩니다. // const { register } = useForm(); ... ...} register 함수를 이용해..

Axios 사용법    ❗️소개 Axios를 간단히 소개하자면 fetch() 함수처럼 리퀘스트를 보내고 리스폰스를 받을 수 있는 라이브러리입니다!fetch() 함수랑 사용법은 비슷한데요. 조금 더 편리하게 쓸 수 있는 라이브러리라고 생각하시면 됩니다. Axios를 설치하고 사용하는 방법에 대해 간단히 설명드릴게요. Axios를 아주 간단하게만 사용해 볼 거니까, 쉽게 따라 하실 수 있을 겁니다. ❗️Axios 설치방법npm install axios package.json 파일의 dependencies 안에 아래처럼 axios 가 추가될 겁니다."dependencies": { ... "axios": "^1.2.2", ...}  ❗️Fetch와 Axios 사용법 비교 - 요약1. 우선 GET..

React 모듈 불러오는 방법   ❗️상황지금까지 아래와 같은 코드를 이용해서 사용했었는데import { createContext } from 'react';const MyContext = createContext(null); 다른 강의를 보면서 공부중 아래와 같은 코드를 사용해서 이게 뭐지? 하면서 찾아보았다 import React from 'react';const MyContext = React.createContext(null); ❗️차이점이 두 방법은 기능적으로 동일합니다. React.createContext는 React 모듈의 메서드를 직접 호출하는 방식이고,import { createContext } from 'react'는 ES6 구조 분해 할당을 사용하여 createContext 메서드만을..

CSR vs SSR vs SSG    Client Side Rendering (CSR)CSR은 웹 브라우저에서 자바스크립트로 HTML을 만들어 렌더링하는 방식을 말합니다.👍장점▪️ 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임 없이 부드럽게 페이지가 바뀝니다.▪️ 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생합니다.👎단점▪️ SPA(Single Page Application)의 경우 처음 페이지 접근시 서버로부터 전체 페이지에 대한 자바스크립트 번들파일, CSS 파일을 받아야 하므로 페이지를 만들고 유저가 사용하기 까지 시간이 SSR에 비해 오래 걸립니다.▪️ 검색엔진에서 자동화된 로봇인 ‘크롤러’로 웹 사이트를 읽는데, CSR은 자바스크립트를..