👾 App.js
const App = ()=>{
const [inputValue, setInputValue] = React.useState('');
const addInputValueHandler = (inputValue) => {
setInputValue(inputValue);
}
return (
<>
// props으로 함수pointer 전달
<Child onAddInputValue={addInputValueHandler}/>
사용자 입력 값 : {inputValue}
</>
);
}
👾 Child.js
const Child = (props) => {
const [newValue, setNewValue] = React.useState('');
// newValue 전달해서 저장
props.onAddInputValue(newValue);
return(
<input
value={newValue} // ⭐️ 양방향 바운딩
onChange={ (e) => { setNewValue(e.target.value); } }
/>
);
}
🔦 출력
[참고] Udemy - React 완벽 가이드 with Redux, Next.js, TypeScript