데이터가 있을 경우에만 이벤트 처리하기

오늘의 개발 목표

_onClickOpenWrite 메서드 최적화

     사용자가 화면을 열거나 닫을 때마다 불필요한 재랜더링 방지

캘린더 클릭 이벤트 최적화

     캘린더에서 데이터가 있는 날짜만 클릭 가능하도록하여 불필요한 이벤트 방지

 

진행 상황

_onClickOpenWrite 메서드 최적화

    기존에는 상태 변경 후에 setState 함수를 호출하여 재랜더링이 발생함

    -> 상태 변경 후 setState 함수 호출을 최적화하여 재랜더링을 최소화

void _onClickOpenWrite() {
  _open = !_open; // 상태를 직접 변경
  // setState(() {}); // setState 함수 호출 삭제
}

 

 

캘린더 클릭 이벤트 최적화

     각 날짜를 탭할 때마다 해당 날짜에 데이터가 있는지 확인하고, 데이터가 있는 경우에만 클릭 이벤트를 적용하도록 구현

if (widget.querySnapshot != null) {
  String formattedDate = DateFormat('yyyy/MM/dd').format(DateTime(year, month, daysList[index]));
  hasData = widget.querySnapshot!.docs.any((doc) => doc['date'] == formattedDate);
}

return GestureDetector(
  onTap: hasData
    ? () {
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => DayDetailsScreen(
            year: year,
            month: month,
            day: daysList[index],
            querySnapshot: widget.querySnapshot,
          ),
        ));
      }
    : null,
  child: DayWidget(
    year: year,
    month: month,
    day: daysList[index],
    querySnapshot: widget.querySnapshot,
  ),
);

 

해결 방법

_onClickOpenWrite 메서드 최적화

    상태 변경을 setState 함수 호출 없이 직접 처리하여 불필요한 재랜더링 방지

 

캘린더 클릭 이벤트 최적화

     각 날짜를 탭할 때마다 데이터의 유무를 확인하여 클릭 가능 여부를 판단하고, 데이터가 있는 경우에만 클릭 이벤트 적용

 

 

앞으로의 계획

_onClickOpenWrite 메서드 최적화

    다양한 상태 관리 방법을 고려하여 최적화된 방법을 적용 예정

    더욱 효율적인 코드를 위해 코드 리팩토링 예정

 

캘린더 클릭 이벤트 최적화

    상세 페이지로 이동하는 과정에서 데이터를 활용하여 해당 날짜의 상세 정보를 동적으로 표시 예정

    데이터가 없는 경우에는 사용자에게 안내 메시지를 표시하여 더욱 직관적인 사용자 경험을 제공 예정

 

---

 

또 다른 문제점

 

 

diary app의 main screen

 

 

개발 일지를 작성하면서 발생 문제점 중 하나는 "버튼 클릭 또는 뒷배경 클릭(위 사진의 플러스 버튼) 시 재랜더링"이었다. 이는 setState 함수를 사용하여 상태를 변경하고 있어서 발생하는 문제인데, 해당 문제를 해결하기 위해 _onClickOpenWrite 메서드 내에서 상태 변경 부분을 수정하고자 했으나, 현재는 setState 함수를 사용하지 않으면 상태를 변경할 수 없는 제약이 있었다. 따라서 일단은 setState 함수를 사용하여 상태를 변경하는 방식으로 진행하기로 하였다. 

// main_screen.dart

void _onClickOpenWrite() {
    setState(() {
      _open = !_open;
    });
}

 

 

그러나 앞으로는 다른 상태 관리 방법을 적용하여 재랜더링을 최소화하고 성능을 개선하는 방법을 고려할 예정이며, setState 함수를 사용하는 것 외에도 다양한 상태 관리 라이브러리나 패턴을 적용하여 보다 효율적인 상태 관리도 고민해 봐야 할 것 같다.