컴포넌트 안에 컴포넌트 안에 컴포넌트 안에 컴포넌트 안에...(살려줘) 이렇게 컴포넌트가 여러 개 중첩되어 있으면 그만큼 props로 한 단계씩 state값을 전달하면 된다. 하지만 이 컴포넌트들끼리 서로 state값을 공유할 순 없는걸까? 그럴 땐 context API가 있다.
let userNameContext = React.createContext()
//이 '범위'를 다른 파일에서 사용하려면 이걸 export한 다음, 필요한 파일에서 import하여 사용하면 된다.
<userNameContext>
<div>
<Box></Box>
<Card></Card>
</div>
</userNameContext>
let user = useContext(userNameContext);
이렇게 props 없이도 state 값을 사용할 수 있다.
그런데 이게 좀 복잡해서 차라리 컴포넌트를 적게 만들어서 props를 사용하는 것을 선호하는 사람도 있다고 한다. 간편하게 값을 전달할 수 있다면 props가 제일 나은가 보다.