react 함수형하위컴포넌트에서 함수형상위컴포넌트 state변경하기

결론부터 말하겠습니다. react하위컴포넌트에서 상위컴포넌트 state를 변경하기 위해서는 하위 컴포넌트에 상위컴포넌트의 setstate를 props로 받아와서 setstate를 이용해 변경해주면 됩니다.

예시를 들겠습니다. 우선 예시의 컴포넌트들간의 architecture은 다음과 같습니다.(twitter클론 코딩 중 일부로 본글의 내용과 상관없는 부분은 삭제했습니다.)
Tweets컴포넌트
-tweet컴포넌트1
-tweet컴포넌트2
-tweet컴포넌트3
-tweet컴포넌트4
-tweet컴포넌트5

예시에서 코딩을 통해 구현하려는 기능은 다음과 같습니다. tweet컴포넌트에 속한 delete버튼을 클릭하면 해당 tweet컴포넌트를 삭제하는 기능입니다.

해당 기능을 구현하기 위한 전략은 다음과 같습니다. tweet컴포넌트의 버튼 클릭시 Tweets컴포넌트의 tweetser state를 변경하여 새로운 state에 대한 화면을 출력하게 하는 것입니다.

///부모 컴포넌트입니다. 

import React, {useState} from 'react';				//usestate를 쓰기위해서 import해줍니다.
import Footer from '../Footer';
import Tweet from '../Components/Tweet';			//Tweet컴포넌트를 삽입하기 위해 import해줍니다.
import './Tweets.css';
import dummyTweets from '../static/dummyData';

const Tweets = () => {

    const [tweetser,setTweetser]=useState(dummyTweets); 	//tweetser에 tweet정보를 담은 dummytTweets배열을 초기값으로 할당해줍니다.
	
    return (<div>
    			//Tweet하위 컴포넌트를 호출하면서 state와 setstate함수를 prop로 전달합니다.
    			{tweetser.map((cur)=><div key=cur.id><Tweet tweet={cur} tweetDeleter={setTweetser} tweets={tweetser}/></div>)} 
            </div>)
    )
 
export default Tweets;

///자식 컴포넌트입니다. 
import React from 'react';
import './Tweet.css';
import dummyTweets from '../static/dummyData';

const Tweet = ({ tweet,tweetDeleter,tweets}) => {		//setstate와 state를 prop로 받아왔습니다.

  return (
    <li className="tweet" id={tweet.id}>
    	// 버튼 클릭시(onClick시 props로 받아온 tweetDeleter를 작동시킴으로써 상위컴포넌트의 state가 바뀌게 되고 화면도 새로운 state에 맞추어 바뀌게 됩니다.
          <div className="tweet__userInfo--buttonWrapper">
              <button className=" tweet__deleteButton" onClick={()=>tweetDeleter(tweets.filter((cur)=>cur.id!==tweet.id))}><i className="far fa-trash-alt"></i></button>
          </div>
    </li>
  );
};

export default Tweet;

참고자료
1. 개념참고
2. twitter clone coding project form은 코드스테이츠 소프트웨어 엔지니어링 코스 과제중 일부를 차용한 것입니다.