컴포넌트의 옵션 props 기본 지정_컴포넌트에 지정하면 안되나?

 

 

현재는 이렇게 props에 기본값을 주는 방식으로 했는데 변하지 않을 값이라면

컴포넌트 안에 코드 내에 지정값으로 주려고 했으나,

1. 확장 가능하고 유연한 컴포넌트 => 후에 바뀔 수 있기 때문에

2. 더 리액트스러운 방식(가독성과 확장성 모두 확보된 패턴)

이라고 나으 선생님.. 지피티가..ㅋㅋㅋ

const defaultLocalizer = dateFnsLocalizer({
    format,
    parse,
    startOfWeek,
    getDay,
    locales: locales,
});

function defaultEventPropGetter(){
	~~~
}


function CustomCalendar({
    date,
    events = [],
    localizer = defaultLocalizer,
    toolbar = false,
    onNavigate,
    eventPropGetter = defaultEventPropGetter
}){
    const month = getMonth(date) + 1;
    const year = getYear(date);

    return(
        <>
            <div className="tit_box">
                {mobileDesign && (
                    <Button
                        className='btn_prev'
                        isOutline
                        icon='ChevronLeft'
                        aria-label='Prev'
                        onClick={btnPrevMonth}
                    />
                )}
                <div className="ylp-month-title">
                    {formatByLang(date, "LLLL yyyy", language)}
                </div>
                {mobileDesign && (
                    <Button
                        className='btn_next'
                        isOutline
                        icon='ChevronRight'
                        aria-label='Next'
                        onClick={btnNextMonth}
                    />
                )}
            </div>
            <div className="ylp-month-cal">
                <Calendar
                    localizer={localizer}
                    events={events}
                    date={date}
                    views={["month"]}
                    toolbar={toolbar}
                    eventPropGetter={eventPropGetter} // 달력에 보여지는 이벤트 항목의 스타일이나 클래스를 반환
                    startAccessor="start"
                    endAccessor="end"
                    onNavigate={onNavigate} // toolbar가 true일 때 사용
                    components={{
                        event: CustomEvent,
                        header: CustomHeader,
                        dateCellWrapper: (props) => <CustomDayCell {...props} month={month} year={year} />,
                        dateHeader: (props) => <CustomDayCellHeaderContent {...props} month={month} year={year} />,
                    }}
                    selectable
                    resizable
                />
            </div>
        </>
    )
};

 

 

더 좋은 코드를 고민하는데 봐줄사람이 없으니..

지피티에게 많이 물어보는 거 같당 흅😂