자식컴포넌트에서 부모컴포넌트로 함수 보내주기
2021. 11. 20. 19:52ㆍTIL
예약 리스트에서 예약취소 후 리스트로 돌아가도 데이터가 refresh되지않고 리스트 화면에서 나갔다 들어온 후에야 refresh되는 점을 해결하였다. 그냥 취소버튼 누른 후 데이터를 부르는 함수를 호출해주면 될것같았지만, 이번 경우는 한 컴포넌트에서 처리해주고 있는 것이 아니고 자식 컴포넌트가 가지고있는 함수를 부모컴포넌트로 보내주어야한다.
먼저, 부모컴포넌트인 AppHome에 컴포넌트를 연결해주는 함수를 만든다.
// AppHome.tsx
fetchMoreDataConnecter = (childFunction?:any) => {
console.log(childFunction)
}
만들어준 fetchMoreDataConnecter함수를 데이터를 가지고있는 자식 컴포넌트로 보내준다.
// AppHome.tsx
<ReservationList
listUpdate={noticeType}
open={reservationList}
openResultDrawer={this.openResultDrawer}
close={this.closeReservationList}
fc={this.fetchMoreDataConnecter} // <----- 여기
update={this.state.update}
/>
자식 컴포넌트로 와서 마운트가 되기 전인 componentWillMount에서 functionConnecter함수를 호출해준다.
// ReservationList.tsx
interface ReservationListProp {
fc:(data:any) => void // 함수 타입 정해줌(타입스크립트)
}
componentWillMount() {
const { fc }= this.props
fc((aaa) => {
this.fetchMoreData(aaa)
})
}
이제 AppHome으로 돌아와 코드를 보면
// AppHome.tsx
fetchMoreDataConnecter = (childFunction?:any) => {
this.fetchMoreDataConnect = childFunction
// fetchMoreDataConnect라는 함수를 만들어 reservationList에서 childFunction으로 받아온 fetchMoreData함수를 넣어준다.
}
// 그리고 마지막으로 함수를 하나더 만들어 위에서 만들어준 fetchMoreDataConnect함수를 호출해준다.
// 파라미터로 true를 보내는 이유는 다른 컴포넌트에서 부를때 파라미터가 필요한 경우가있어서
fetchMoreDataFunction = () => {
this.fetchMoreDataConnect(true)
}
다행히 예약 취소 버튼이 같은 컴포넌트인 AppHome에 있어서 해당 onClick함수에서 fetchMoreDataFunction을 호출해준다.
// AppHome.tsx
// 예약 취소 버튼 클릭 후 최종적으로 뜨는 버튼
<button onClick={e => this.closeAllDrawer()}>초기화면으로 돌아가기</button>
// AppHome.tsx
closeAllDrawer = () => {
this.fetchMoreDataFunction()
}
이제 예약 취소 후 리스트로 돌아가면 바로 새로운 예약 리스트가 호출되어 새로고침 해주지않아도 예약 상태가 변경되어있다.
자식에서 부모로 함수를 보내는 것도 데이터 보내줄때와 크게 차이없는 방법인것같다. 어떤식으로 해줘야할지 고민을 많이하였는데 생각보다 어렵지않은 방법으로 해결 할 수있었다. 비슷한 상황이 생기면 다음번엔 더 빠르게 해결 할 수있겠지🤓
'TIL' 카테고리의 다른 글
xlsx라이브러리 사용하여 엑셀 파일로 다운로드 기능 심어주기 (0) | 2021.12.28 |
---|---|
📱모바일에서 💻pc버전으로 볼 수있도록 구현하기 (0) | 2021.11.26 |
✨입사 후 첫번째 테스크, 관리자페이지1 (0) | 2021.10.12 |
transition만 사용해 메뉴 스르륵 열리게 만들기 (0) | 2021.09.26 |
kakao map api로 지도 구현하기! (0) | 2021.09.26 |