Single Page Application는 컴포넌트간 state 공유를 하려면 props를 사용하여 연결시켜주어야합니다. 그러나 props 전송은 한 단계씩 밖에 안됩니다. 많은 중첩이 이루어질 경우에 props를 반복하여 사용해야하기때문에 효율이 좋지 않습니다. 이 경우에 사용할 수 있는 방법 두 가지가 리액트 문법인 context API와 redux 같은 외부 라이브러리 사용입니다.
오늘은 Context API 사용해보겠습니다.
export let Shop = createContext()
<Shop>
<Detail shoes={shoes}/>
</Shop>
<Shop.provider value={{ shoes, main }}>
<Detail shoes={shoes}/>
</Shop>
import { Shop } from '파일 위치'
let { shoes } = useContext(Shop)
{ shoes }
이런 단점에서 실전에선 잘 사용하지 않습니다.