(React) Parent 와 Child 컴포넌트간의 값 전달, 변경, 반영시키기

Child 를 품고 있는 Parent 컴포넌트에서 Child에 값을 전달하면 Child 안에서 값을 변경한 후, 변경한 값이 Parent 에도 동기가 되도록 할 필요가 있을 경우.
예를 들면, Parent 가 서버에서 값을 가져와서 다이얼로그를 띄워 값을 변경하여 그 값이 Parent에 반영시킬 경우.

 

Parent

const ParentComp = () => {   const [values, setValues] = useState({"key1": "value1", "key2": "value2"});      useEffect(() => {      // 서버에서 값을 가져온다면       // rest api get -> setValue( ... )    }, []);      return (     <Child changeData={values} receiveData={setValues} />   ); };

 

Child

const ChildComp = (props) => {   // Parent values 를 임시보관   const [values, setValues] = useState(null);      const chnageValue = (val) => {      // Child 임시보관 값을 변경     setValues((prevValue) => ( { ...prevValue, "key1": val });   };      const myFunction() {     // Parent의 값을 Child 변경값으로 대체     props.receiveData (values);   }      useEffect(() => {      // Paraent 값으로 초기화      setValues(props.changeData);   }, [props]);      return (     <>       <input onChange={(e)=>chnageValue(e.target.value)/>       <button onclick="myFunction()">값 변경 확정</button>      </>   ); };