[ react ] 부모 컴포넌트와 자식 컴포넌트 데이터 전달

Frontend/react

[ react ] 부모 컴포넌트와 자식 컴포넌트 데이터 전달

IT grow. 2023. 7. 25. 17:45

부모 : Home()
자식 : HeaderBar()

현재 상황

Home() 함수는 동기로 api 통신을 하여 데이터를 받아온뒤 posts ( object type ) 에 저장을 하고 ,
props로 {posts}를 받고 있는 형태이며 , 받은 데이터를 return 을 통해 화면에 카드 리스트 형태로 출력되는 상황

기존화면에서 검색 필터 기능이 필요하여 작업하다가

(1) 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달

(2) 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달

(1) + (2) 가 동시에 발생해야 하는 상황이 발생...

그러다가 자식 컴포넌트 props 로 함수 자체를 넘길수 있다는 것을 알게되었다..!! @@@@

export default function Home({posts}) {

  const [postState,setPostState] = useState({posts});

  useEffect(()=>{
    getPostDate(postState);
  })
  
  const getPostDate = (postState) =>{
    setPostState(postState);
  }

  return (
    <div className={styles.grid}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <HeaderBar postList = {{posts}} getPostDate = {getPostDate}/>

      <main className={styles.main}> 

        {     
              postState.posts.length != 0 ? 
              postState.posts.map((post)=>(
                <BlogCard
                  title = {post.title}
                  author = {post.author}
                  coverPhoto = {post.coverPhoto}
                  key ={post.id}
                  dataPublished = {post.dataPublished}
                  slug = {post.slug}
                  postChk = {"show"}
                />
              )) :
                <BlogCard
                  postChk = {"none"}
                />

        }
      </main>
    </div>
  );
}

getPostDate 라는 함수를 하나 선언하고 , 이 함수는 부모의 상태관리값을 업데이트하는 함수.

  const [postState,setPostState] = useState({posts});

  useEffect(()=>{
    getPostDate(postState);
  })
  
  const getPostDate = (postState) =>{
    setPostState(postState);
  }

HeaderBar 컴포넌트에 props로 위에서 부모의 상태관리값을 업데이트 해주는 getPostDate 함수 자체를 넘겨준다.

 <HeaderBar postList = {{posts}} getPostDate = {getPostDate}/>

HeaderBar 컴포넌트에서는 부모에서 전달해준 props를 getPostDate로 받아준다.

function ResponsiveAppBar ({postList , getPostDate}) {
  const [anchorElNav, setAnchorElNav] = React.useState(null);
  const [anchorElUser, setAnchorElUser] = React.useState(null);
  const [userInput,setUserInput] = useState({
    searchItem:"",
  });

다음은 부모의 상태값 관리를 업데이트 하는 getPostDate() 를 다음 코드처럼 사용하여 , 부모의 상태값을 업데이트 가능.

  const handleChange = (prop) => (event) =>{
    
    if(event.key === 'Enter'){

      const searched = postList.posts.filter((post)=>{
          return post.title.toLowerCase().includes(event.target.value.toLowerCase());
      });
      
      getPostDate({"posts":searched});
    }
  }

Home() 컴포넌트 내에 useEffect() 내에 getPostDate()를 선언함으로써 마운트 될때 변경된 값이 찍히는것을 확인할 수 있다.

  useEffect(()=>{
    getPostDate(postState);
  })

정리하자면

부모 컴포넌트에서 자식 컴포넌트에 props 로 함수 자체를 전달.

자식 컴포넌트에서는 props 로 받은 함수 자체를 받아 , 부모의 상태값 업데이트.

저작자표시