라이프사이클 관련 질문

벨로퍼트님께,

안녕하세요, 수강한지는 꽤 오래 지났고, 지금은 혼자 독학으로 프로젝트를 만들고 있는 학생입니다.

벨로퍼트님 유튜브 보면서 여러가지 배운 것들이 많고, 또 여쭤본다면 비교적 금방 해결될 수 있을 거라 생각돼 이렇게 질문을 남겨 봅니다. 혼자 약 4-5개월 동안 이것도 저것도 해봤지만, 포기하고 싶은 마음이 들기도 하다가 혹시나 해서 여쭤봅니다.

제가 생각하기에, 이 문제는 제가 라이프사이클 관련하여 제대로 접근하는 방법(ex. 디버깅)을 제대로 몰라서 발생한 문제라고 생각합니다. 답변 주시면 진심으로 감사하겠습니다.

원하는 기능: 캘린더의 날짜를 선택하고, 해당 날짜의 스케줄에 추가된 Item을 선택했을 시, 해당 Item을 수정할 수 있는 창을 띄우는 것.

문제: Item을 선택한 후, Navigation을 활용하여, onpress시 화면 변경을 시도했으나, Navigation의 내용을 불러올 수 없음.

github: https://github.com/Gophycal/Goplan

1. Eventhandelr 오류

<Agenda
        // loadItemsForMonth={loadItems}
        items={items}
        selected={'2022-05-11'}
        renderItem={renderItem}
        // Specify how agenda knob should look like
        renderKnob={() => {
          return (
            <View>
              <Text>renderKnob</Text>
            </View>
          );
        }}
        // Specify what should be rendered instead of ActivityIndicator
        renderEmptyData={() => {
          return (
            <View>
              <Text>renderEmptyData</Text>
            </View>
          );
        }}
      />
      <Button
        style={{}}
        title="+"
        onPress={() => navigation.navigate('TodoListCreation')}
      />
    </>

관련 에러로 Eventhandler 에러가 있었습니다. props를 통해, navigation을 전달하는 방식을 사용하려 했으나, renderItem 함수가 Eventhandler이기 때문에, 추가로 변수를 전달할 수 없다는 오류 메세지를 받았습니다.

이 오류는 Agenda 컴포넌트의 renderItem의 속성값을 통해, 변수를 전달하는 props 방식을 활용하다 발생했습니다.

2. 해결방안

나름 고민해본 해결방안입니다만, 솔직히 저는 관련 학과도 나오지 않고 독학하고 있는 중이기 때문에, 접근하기 어렵다고 판단돼 마지막으로 고려해본 방법 중 하나입니다. 바로 처음에 말씀 드렸던, 라이프사이클을 이용한 접근 방법입니다.

디버깅을 통해 Agenda 컴포넌트의 라이프사이클을 파악하여, 해당 함수의 순서를 찾고, 그 순서에 맞추어 해당 함수로 변수를 전달하는 방법을 찾아, renderItem 함수에 navigation을 전달하는 방식입니다.

현재 제가 접근하고 있는 방법입니다만, 너무나 어렵습니다. 도움 부탁드립니다.