자식컴포넌트에서 부모컴포넌트로 함수 보내주기

2021. 11. 20. 19:52TIL

예약 리스트에서 예약취소 후 리스트로 돌아가도 데이터가 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()
}

이제 예약 취소 후 리스트로 돌아가면 바로 새로운 예약 리스트가 호출되어 새로고침 해주지않아도 예약 상태가 변경되어있다.

자식에서 부모로 함수를 보내는 것도 데이터 보내줄때와 크게 차이없는 방법인것같다. 어떤식으로 해줘야할지 고민을 많이하였는데 생각보다 어렵지않은 방법으로 해결 할 수있었다. 비슷한 상황이 생기면 다음번엔 더 빠르게 해결 할 수있겠지🤓