[React] 자식 컴포넌트에서 부모로 데이터 보내기 (child -> parent) by React Hook

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding

 

#2021.06.25 내용 추가 : 이 것의 본질은 props 로 내려주는 것이 data가 아니라 function 이라는 것이다. 그 게 본질이다. 너무 어렵게 설명을 이리저리 했던 것 같다. 내가 이해한 본질은 이러했다.

 

리액트를 쓰다보면 parent의 props에 속성 값을 보내서, child에서 처리하는 것 뿐만아니라,

child에서 처리한 것을 부모로 보내주어야 할 때가 있다.

아래와 같이 부모로 부터 전달받은 setter (function)를 통해 전달할 데이터를 저장하면 된다.

// parent
const parent = () => {

	const [htmlData, setHtmlData] = useState(0);
	return <TextEditor setHtmlData={setHtmlData}/>

}

// child
const TextEditor = (props) => {

	props.setHtmlData(getContentHTML);
}

+ props는 순수함수여야 하기 때문에 그러하다.

참조 : ko.reactjs.org/docs/components-and-props.html#props-are-read-only

개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 

리코딩 ReCoding