useContext 질문 드립니다.

[강병민]

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 이라는 이름으로 렌더링해도 그 데이터를 사용할 수 있는데, 왜 그런건가요? 문법적으로 이해가 잘 안됩니다.  그리고 보낼 스테이트가 여러개 일때는 다른 컴포넌트 들에서 데이터를 어떤식으로 식별하나요 ?

[codingapple]

useContext() 쓰면 그 자리에 state가 전부 남습니다 그걸 name변수로 별도로 저장해서 그럴 뿐입니다 

useContext() 출력하면 모든 state 다 들어있습니다 

[글쓴이]

글