[헤딩금지] Context

Web › Enlighten
dev, js, react

What is Context?

간단하게 말하면

parent, child component가 연결되어 있지 않아도 데이터 공유 가능하게 해요.

왜 필요할까요?

|--NodeContainer
    |--NodeListComponent
        |--NodeComponent
        |--NodeComponent
        |--NodeComponent
        |--NodeComponent
            |--Button

이런식으로 계층이 잡혀있다고 가정해봅시다. data 를 NodeConainer 부터 Button 까지 전달하려면
NodeContainer -> NodeListComponent -> NodeComponent -> Button 로
순서대로 전달이 되어야 해요.

그런데 모든 컴포넌트가 data를 필요로 하진 않을 수 있고, 누락이 있을수도 있습니다.

Observable Pattern

데이터는 provider(공급자) 가 관리하고 consumer(소비자/관찰자)는 provider를 subscribe(구독)하여 데이터를 얻는 방식

이렇게 되면

컴포넌트 간 data dependency가 없어졌다고 하며 이 흐름을 만들어 주는 기술이 Context 라고 합니다.

Provider/Consumer

  1. consumer는 provider보다 낮은 hierarchy에 있어야 한다.

  2. consumer는 provider가 제공하는 call-back 함수로 데이터를 변경 가능.
    2-1. provider —- callback func —-> consumer
    2-2. consumer —- action(params: data) —-> provider
    2-3. provider —- sync —- consumer

    이러한 흐름을 DDAU(Data Down Action Up) 이라고 합니다.

    이런 one-way-flow는 일관성 유지에 좋아요.

Provider