[React-datePicker] 시작날짜, 종료날짜 컴포넌트 만들기 (1)

 

 

 

#React 데이터피커

데이터피커는 보다 간편하게 사용자에게 날짜를 직관적으로 선택하게 해줄 뿐만아니라,

개발자의 DX를 향상시켜주는 강력한 라이브러리이다. 

 

 

React-hook-form(폼 데이터 관리 라이브러리) + Yup(폼 유효성검사 라이브러리) + React-datePicker 와

같이 사용하면 매우 강력한 시너지효과로 탄탄한 폼을 만들 수 있다. 

 

new FormData나 객체형으로 직접 사용하지않고 폼데이터 Handler를 구현할 수 있으며,

Yup을 통해 매우 간편 유효성검사와 에러처리를 쉽게처리 할 수 있는 장점을 가졌다. 

 

 

 

---

 

 

1. 데이터피커 설치

npm install react-datepicker --save

 

제일 먼저 필요한 라이브러리 설치, npm or Yarn 필수

 

 

 

 

2. 데이터피커 프로퍼티

  <DatePicker 
        onChange={(data) => onChange(data)} // 선택한 날짜를 전달
        selected={value} //선택 이후 Input에 들어갈 문자열
        placeholderText='종료날짜를 선택해주세요' //플레이스 홀더
        dateFormat="yyyy-MM-dd" // 데이터 포멧
        locale='ko' //한국 기준
        minDate='' // 선택할수 있는 최소날짜
        maxDate='' //선택할수 있는 최대 날짜
    />

 

 

가장 중요 프로퍼티는

"onChange"  선택되는 날짜를 onChange의 매개변수에 전달한다.

"selected" 선택되는 날짜를 Input의 value값으로 노출시킨다.

"minDate" 선택할 수 있는 최소날짜이다.

"MaxDate" 선택할 수 있는 최대의 날짜 

 

위의 프로퍼티와 dateFormat까지 알면 시작 - 종료 컴포넌트를 구현하기 충분하다. 

 

 

 

 

3. React-hook-form / Yup 설치

npm install react-hook-form // 리액트 훅 폼 설치 

npm install yup // yup 라이브러리 설치

npm install @hookform/resolvers yup // yup + hook Form 연동 라이브러리 설치

 

데이터피커와 react-hook-form 연동은 다른 도구가 필요없지만. Yup과 react-hook-form은 라이브러리를 통해 간편하게

연동가능하다.

 

꼭 "npm install @hookform/resolvers yup" 설치한 이후 위 라이브러리와 더불어 import 해주자

 

 

 

 

4. React hook form   +  React DatePicker  + Yup

import { yupResolver } from '@hookform/resolvers/yup';
import DatePicker from 'react-datepicker'; 
import { useForm , Controller } from 'react-hook-form'; 
import * as Yup from 'yup';


//Yup을 이용한 Validation
const schema = Yup.object({
    start_Date : Yup.date().required('시작일자를 정해주세요'),
    end_Date : Yup.date().min(Yup.ref('start_Date'), '종료일이 시작일자보다 빠릅니다.').required('종료일자를 정해주세요'),
})

export default function Test(){
    const { control ,handleSubmit , formState : { errors }} = useForm({
        resolver : yupResolver(schema) // yupResolver를 이용해서 Yup 스키마 유효성 연동
    });

    //SubmitHandler
    const onSubmitHandler = (data) =>{
        console.log(data);
    }

    return(
        <>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
            <Controller
                name = 'start_Date'
                control={control}
                render={({field : { onChange , value }})=> 
                    <DatePicker
                        onChange={(startDate)=>onChange(startDate)}
                        selected={value}
                        dateFormat={'yyyy-MM-dd'}
                    />
                }
            />
           <button type='submit'>등록</button>
        </form>    
        </>
        
    )
}

 

<Controller /> 내 name과 "control"를 꼭 선언해주자.

Controller는 다른 라이브러리들과 같이 사용이 간편하게 해주는 도구로 register와 다르게 라이브러리를 혼합하며 생길 수 있는 

복잡한 로직을 직관적으로 관리할 수 있게 해준다. 

 

 

위의 로직을 간단하게 설명하자면

React hook Form로 Contoller를 통해 데이터피커와 control 프로퍼티를 선언하고 control 프로퍼티는 field 객체를 통해 

전달되어 React datepicker와 연결된다.

 

이후 hook Form 과 Yup의 연결을 위해서 YupResolver를 Yup의 스키마로 반영

 

 

 

Yup의 스키마는 유효성검사를 실행한다. 

const schema = Yup.object({
    start_Date : Yup.date().required('시작일자를 정해주세요'),
    end_Date : Yup.date().min(Yup.ref('start_Date'), '종료일이 시작일자보다 빠릅니다.').required('종료일자를 정해주세요'),
})

 

이는 체이닝을 통해 순서대로 유효성검사를 진행하고 hadnleSubmit이 실행 된 이후에 검사가 진행된다.

end_Date의 Yup.ref('start_Date')는 종료일이 시작일보다 빠를 수가 없기에

시작일자 전 일자를 선택하지 못하도록 막은 로직이다. 기준을 Yup 내부에서 처리 할 수 있다. 

 

 

 

 

 

위와 같이 코드를 구성했다면 submit 하여도 console.log가 뜨지않는다.

당연하다 구현한 form에  end_Date폼이 없기에 Yup의 유효성 검사를 통과하지 못했기 때문에 진행되지 않는다.

    const { control ,handleSubmit , formState : { errors }} = useForm({
        resolver : yupResolver(schema) // yupResolver를 이용해서 Yup 스키마 유효성 연동
    });

    console.log(errors);

 

 

이렇게 console.log를 찍어서 에러처리가 어떻게 되고있는지 확인해보자

 

 

콘솔을 보아하니 에러처리가 아주 잘되고있다. 

이를 이제 사용자 경험을 향상시키기 위해 에러표시를 해주자

 

 

5. 에러표시 하기

        <form onSubmit={handleSubmit(onSubmitHandler)}>
            <Controller
                name = 'start_Date'
                control={control}
                render={({field : { onChange , value }})=> 
                    <DatePicker
                        onChange={(startDate)=>onChange(startDate)}
                        selected={value}
                        dateFormat={'yyyy-MM-dd'}
                    />
                }
            />
            {errors['start_Date'] && errors['start_Date'].message} //에러처리 로직
           <button type='submit'>등록</button>
        </form>

 

errors 프로퍼티를 이용하여 객체 내의 메세지를 가져오자.

 

객체 에러가 발생하지 않으면 message는 빈 value를 가지고 있으며 에러가 개선이 되면 메세지 또한 사라지기 때문에

그러므로 message가 있으면 error고 아니면 success이다. 

 

errors['start_Date']가 있으면 에러 메세지를 내놓아라 라는 식으로 '&&' 연산자를 사용해주면 된다.

 

 

---

 

 

 

 

 

여기까지 문제없다면

초기 로직은 완성되었으니

 

종료날짜와 컴포넌트 화 시켜보자.