React/hooks
자식 Compo의 state => 부모 Compo에서 받기
GROWNFRESH
2020. 10. 5. 19:31
자식 컴포넌트에서 변화되는 state을 부모 컴포넌트에서도 바로 바로 반영받고 싶다면 어떻게 해야 할까?
1. 부모 컴포넌트에서 update 함수를 자식에게 props로 넘겨준다.
-update 함수
const [SomeState, setSomeState] = useState("") //state 생성
const updateState = (newCont) =>{ //newContents를 state에 setting하는 함수 생성
setSomeState( newCont )
}
//자식 컴포넌트에 update function을 props로 상속한다.
<SearchCompo refreshFunction={updateState} />
2. 자식 컴포넌트에서 변화하는 state를
부모컴포넌트로부터 상속받은 refreshFunction에 입력해준다.
//자식 컴포넌트
//예를 들어 input 태그에 onChange함수로 state을 관리한다고 하자.
const [childState, setchildState] = useState("") //state 생성
const changeHandler=(event)=>{ //state + refreshFunc에도 curVal을 할당할것
setchildState(event.currentTarget.value);
props.refreshFunction(event.currentTarget.value)
}
//예를 들어 input 태그에 onChange함수로 state을 관리한다고 하자.
<input onChange={changeHandler}/>