[React] 자식이 부모에게 prop을 주는 방법?

부모→ 자식간의 prop은 가능하지만 자식→부모간의 prop은 불가능하다.
redux없이 어떻게 state를 주고받으면 좋을까?

자식에게 함수를 전달하고, 자식이 부모의 함수를 호출해주면 된다.

예를 들어 버튼 자식 컴포넌트를 누르면, 버튼내용으로 모드를 바꾸는 기능을 구현한다고 하자.
text는 버튼에 들어갈 내용이고, selectMode는 부모가 가지고 있는 함수이다.

// TextButton.jsx : 버튼 자식 컴포넌트
export default function TextButton({ text, selectedMode }) {
  const onClick = () => { // 이 버튼을 클릭하면
    console.log(text);
    selectedMode(text); // 부모의 selectedMode를 호출!!
  };
  return (
    <button className="textButton" onClick={onClick}>
      {text}
    </button>
  );
}

// Test.jsx
	const [testMode, setTestMode] = useState(); // 테스트 모드 
// ... 중략
	// 부모 컴포넌트의 함수
	const selectedTestMode = (mode) => {
	  console.log("selected test mode >> ", mode);
	  setTestMode(mode);
	};
	
	return(
		// 자식 버튼 컴포넌트 
		<SelectCategory 
		  mode="실전 모드"
		  selectedCategoryNum={selectedCategoryNum}
		  selectedCategoryInfo={selectedCategoryInfo}
		/>
	);
// ... 생략

함수를 전달하는 이 방법으로 모듈화된 컴포넌트를 연결하는데에 사용했다.
직관적인 방법은 아니지만 하나의 해결책으로 쓰면 좋을 것 같다.