Context

Context

• 기존의 리액트 어플리케이션에서는 컴포넌트의 props를 통한 데이터 전달(단반향)
  -> 코드도 복잡해지고 사용하기 불편함

• Context는 컴포넌트 트리를 통해 곧바로 데이터를 전달

• 기존방식
  

• context 방식
  

-> 여러개의 컴포넌트들이 접근해야하는 데이터(로그인여부, UI테마 등)

• 주의할점
  - conponenet와 context가 연동되면 재사용성이 떨어짐

  • 아래와 같이 사용해면 됨

  ContextAPI

const myContext = React.createContext(기본값)

-> 만약 상위레벨에 매칭되는 provider가 없다면 기본값이 사용됨
-> 기본값으로 undefined를 넣으면 기본값이 사용되지 않음

Context.Provider

• 데이터를 제공해주는 컴포넌트
• Context.Provider로 하위 컴포넌트를 감싸주면 모든 하위 컴포넌트들이 데이터에 접근할 수 있게 됨

<MyContext.Provider value={something:'something'}>

-> value가 하위 컴포넌트들에 전달됨
-> 컨슈밍
-> 값이 변경되면 재랜더링 됨

Provider value에서 주의해야할 사항

• provider 컴포넌트가 재렌더링 될따마다 모든 하위 consumer 컴포넌트가 재렌더링 됨
  -> 방지하기 위해서는 value를 직접 넣는 것이 아닌 컴포넌트 state로 옮기고 해당 state의 값을 넣어주어야 함

Class.contextType

• 클래스 하위에있는 context에서 데이터에 접근하기위해 사용
• 클래스 컴포넌트는 현재 거의 사용하지않으니 이런게 있다는 것만...

Context.Consumer

• context의 데이터를 구독하는 컴포넌트

<MyContext.Consumer>
  {value => /* 컨텍스트의 값에 따라서 컴포넌트들을 렌더링 */}
</MyContext.Consumer>

function as a child

• 컴포넌트의 자식으로 함수를 사용하는 방법
  

Context.displayName

• 개발자 도구에 displatName을 함께 표시해줌
  

여러개의 Context 사용하기

• context.Provider를 중첩으로 사용하는 방식
  
  -> 많아질 경우 별도의 컴포넌트를 두는게 좋음

useContext()

• hook으로 함수형 컴포넌트에서 context를 쉽게 사용할 수 있게 해줌