React

Context API

기본적으로 리액트에서 다른 컴포넌트로부터 데이터를 전달 받을 땐 props를 사용한다.

props는 전달받고자하는 컴포넌트의 바로 위에 있는

컴포넌트로 부터 전달을 받아야하므로

굳이 필요하지 않은 과정들을 여러번 거쳐서 전달해야하는 경우가 생긴다.

그 과정이 길어지는 경우 context api를 사용할 수 있다

import React, { createContext} from “react”

생성할 때 createContext()
불러올 때 useContext()

useContext의 인자로 createContext()의 반환값 context 을 넣어주어야한다

감싸져있는 하위 컴포넌트 들만 접근 가능하다는걸 잊지말자.

createContext 를 import하고 const context=
createContext()를 실행하면 
비어있는 context가 반환이 된다.

연결해준 컴포넌트 + 그 하위 컴포넌트들은 전부 다 context에 접근할 수 있게 된다.

Context API 재사용

Context API 코드 재사용 프론트에서 작업할 때
공통적으로 들어가는 컴포넌트의 context를 만들어서
각각 컴포넌트를 필요로 하는 쪽에서
useContext로 재사용하고자 하는 값들을 가져와서 사용하면 된다.

• return 부분에 createContext를 변수로 만든거
  provider를 해주고 value로 전달해줄 데이터 형태를 넣어준다.

그 사이엔 props.children 을 사용해서 하위 컴포넌트를 렌더링 해준다.