[React] day.js를 활용하여 동적인 연도 Select 생성하기

import React, { useState, useEffect, useMemo } from 'react';
import { useForm, Controller } from 'react-hook-form';
import dayjs from 'dayjs';

const YearSelect = () => {
    const { control } = useForm({
        defaultValues: {
        	year: defaultValue
        }
    });
    
    const yearOptions = useMemo(() => {
        const currentYear = dayjs().year();
        const startYear = 2024;
        const years = [];

        for (let year = currentYear; year >= startYear; year--) {
          years.push({ label: `${year}년`, value: year.toString() });
        }

        return years;
    }, []);
      
    return (
        <form>
            <Controller
            control={control}
            name="year"
            render={({ field }) => (
                    <Select 
                        {...field} 
                        options={yearOptions} 
                        label="연도별"
                        onChange={(value) => {
                            field.onChange(value);
                        }}
                    />
                )}
            />
        </form>
    )
}

export default YearSelect;

 

2024년부터 시작해서 해가 바뀔 때 마다 그 새해의 연도가 동적으로 생성되도록 하는 연도 셀렉트 컴포넌트를 만들어야 했다.

day.js를 활용하여 현재 연도를 불러오고, 동적인 연도 범위를 설정했다.

그리고 React Hook Form을 사용하여 폼 상태를 관리하고, 기본값 설정이 가능하도록 했다.