debugging_log 2

이지·2020년 11월 29일
0

DeleteBtn 클릭 시 모달창 생성 및 이벤트 삭제


{openDelete && (
        <DeleteParentModal
          del={del}
          setDeleted={setDeleted}
          permlink={upcomingEvents[0][0].event_permlink}
        />
      )}

.
.
.

{deletebtn && ( <DeleteBtn
                          onClick={
                            () => {
                              setopenDelete(!openDelete);
                            }
                          }
                        />

deletebtn 으로 t/f검증을 한 후, DeleteBtn 이 그려지면, onclick 했을때, OpenDelete를 false -> true로 바꿔준다. 최상단에서, OpenDelete가 true 이면, DeleteParentModal이라는 모달창이 화면 전체에 뜨게 되고, 삭제 요청시 필요한 permlink(이벤트 식별 주소)도 props로 넘겨주어 해당 컴포넌트에서 클릭 이벤트 발생 시 Delete API 를 호출할 수 있도록 한다.

디버깅하면서 t/f 검증을 정말 많이 배운것 같다. 리덕스도 전방위적으로 사용되고(거기다 그나마 익숙한 store 형태도 아니었다..).. component간의 연관성도 복잡해서 처음엔 많이 힘들었지만(무슨 5 depts 까지 내려가.. 마치 방공호..? ), 덕분에 이제는 리액트의 전반적인 흐름에 대한 이해가 많이 높아진 것 같다.

+) infinite loop지옥을 맛보며 lifesycle 에 대한 이해도도 높아졌다. 코어 자바스크립트와, 실전 리액트 프로그래밍 등의 책을 읽으며, js와 리액트를 좀더 깊게 이해하고 싶다는 갈증이 생겼다. (알고싶어.. 너의 마음.. )

하루종일 매달려도 안 풀릴 때면 눈물이 쏙 나긴 하지만, 끝내 버그를 해결하고 나면 세상에 더 바랄것이 없을만큼 기쁘다. 더 잘 하고 싶은 마음 뿐이다.

profile
이지피지레몬스퀴지🍋

0개의 댓글