import React, { useState, createContext, useContext } from "react";
const NameContext = createContext("");
const Hello1 = () => {
const name = useContext(NameContext);
const hello4 = React.useMemo(() => {
console.log("re-render in hello1");
return <Hello4 />;
}, []);
return (
<div>
this is Hello1. and Name is {name} {hello4}
</div>
);
};
const Hello4 = () => {
console.log("re-render in hello4");
const name = useContext(NameContext);
return <div>this is Hello4. and Name is {name}</div>;
};
const App = () => {
const [age, setAge] = useState(10);
return (
<>
<input type="text" onChange={(e) => setAge(e.target.value)} value={age} />
<NameContext.Provider value={age}>
<Hello1 />
</NameContext.Provider>
</>
);
};
export default App;
이 코드에서 value={age} 이렇게 데이터를 보내줬는데, 다른 컴포넌트 들에서는 name 이라는 이름으로 렌더링해도 그 데이터를 사용할 수 있는데, 왜 그런건가요? 문법적으로 이해가 잘 안됩니다. 그리고 보낼 스테이트가 여러개 일때는 다른 컴포넌트 들에서 데이터를 어떤식으로 식별하나요 ?
