자식 Compo의 state => 부모 Compo에서 받기

자식 컴포넌트에서 변화되는 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}/>