[REACT] 부모 컴포넌트로 자식 컴포넌트의 state 전달

자식과 부모 간 데이터 전달 관련 포스트는 많은데, 자식에서 부모로 전달할 때 useState를 부모에 쓰는 방법이 대부분이라 한참 찾다가 글을 쓰게 되었다.

 

pagination을 구현하면서, 다른 페이지 버튼을 클릭하면 현재 페이지가 변화해야 하고, 변화할 때마다 재렌더링을 해야 현재 페이지가 변화한 것을 바로 시각화할 수 있다. 

그런데 부모 컴포넌트에 state가 있으면 상태는 변화해도 뷰에 반영이 바로바로 안 되기 때문에 

1. useState 함수는 자식 컴포넌트에 있으면서
2. 자식 컴포넌트에서 변경된 상태를 부모 컴포넌트에 전달해 주어야 함

을 구현해야 했다. 

 

 

부모 컴포넌트

import React from 'react'

function MainPageList() {

// 다른 코드 생략
// places에 페이지와 장소 정보가 담김 (백엔드 api 요청) - 요청으로 받아온 현재 페이지 수는 currentPage에 담겨있음
// {renderPlaces}는 페이지네이션이 적용될 리스트뷰

  const handleCallback = (changedPage) => {
    console.log("넘어온 페이지네이션 페이지", changedPage)
  }

  return (
    <div>      
      {renderPlaces}
      <PaginationView page={places} handleCallback={handleCallback} />
    </div>
  )
}

export default MainPageList

 

자식 컴포넌트

import React, { useState, useEffect } from 'react'
import { Pagination } from 'react-bootstrap'

function PaginationView({page, handleCallback}) {
  
  const [currentNum, setCurrentNum] = useState(page.currentPage)
  
  // 다른 코드 ({items}) 생략
  // 생략 코드에 onClick={() => setCurrentNum(number)} 존재
  // : 페이지 버튼 클릭 시 currentNum을 클릭한 number로 변경
  
  useEffect(() => {
    handleCallback(currentNum)
  })
  
  return (
    <Pagination>{items}</Pagination>
  )
}

export default PaginationView

 

자식에서 부모로 데이터를 전달하려면 콜백 함수가 필요하다. 이 콜백 함수는 자식 컴포넌트에서 데이터를 가져오는 기능을 한다. 

부모에서 콜백 함수를 만들어주고, 자식 컴포넌트로 콜백 함수를 넘겨준다. 

 

자식 컴포넌트에서는 부모에서 넘겨준 대로 props에서 {page, handleCallback}을 받아온다. 

page에는 부모 컴포넌트의 places 정보 (페이지, 장소 리스트 등)이 담겨있다. 

useState를 통해 currentNum을 만들어주고, 버튼을 클릭하면 setCurrentNum을 통해 클릭한 페이지 번호로 currentNum이 변화한다. 

 

useEffect로 감싸줘서 부모에서 넘어온 handleCallback 함수를 currentNum state가 바뀔 때마다 실행시켜주고, 이는 바뀐 currentNum 정보를 부모에게 보낸다. 

 

자식 컴포넌트인 페이지네이션의 다른 페이지 버튼을 클릭하면 부모 컴포넌트에 있는 출력문이 콘솔에 잘 찍히는 것을 볼 수 있다! 

이제 부모 컴포넌트에서는 넘어온 페이지 번호를 통해, 부모 컴포넌트에 있는 백엔드 api 요청 url을 바꿀 수 있다.

 

 

참고 블로그

[React] 부모-자식 컴포넌트 간 데이터 전달 방법 (Passing Data Between a Parent and Child in React)

이 블로그에 있는 코드를 참고하여 내가 쓰고 있는 ES6 문법으로 변경하여 사용하였다.