[React] 컨텍스트 API (Context API)

📄 컨텍스트 API

컨텍스트 API는 자신은 사용하지 않으면서 밑으로 내려줘야하는 코드가 있을 때 혹은 다른 멀리 있는 컴포넌트에 있는 값을 바로 사용할 경우 사용합니다.

컨텍스트를 사용하면 props로 일일이 데이터를 전달해주지 않아도 해당 데이터를 가지고 있는 상위 컴포넌트가 하위 컴포넌트에게 전달해 줄 수 있습니다.

컨텍스트를 사용하기 위해서 createContext함수를 호출하면 객체가 반환된다.

// 컨텍스트 함수 호출
const UserContext = createContext("unknown");

// 컨텍스트 함수 사용
const ContextExample = useContext(UserContext);

createContext를 호출할 때 초기값을 설정하는데 컴포넌트가 값을 검색할때 해당 값이 없으면 초기값이 사용된다.

📄 주의할 점

context는 꼭 필요할 때만 사용한다.

1. Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있다.
2. Prop drilling을 피하기 위한 목적이라면 Component Composition (컴포넌트 합성)을 먼저 고려하자.

📄 예제

import React, { createContext, useContext, useState } from "react";

const MyContext = createContext("defalutValue");

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text} </div>;
}

function Parent() {
  // 중간 컴포넌트인 Parent에 아무런 props도 전달되지 않았다.
  return <Child />;
}

function GrandParent() {
  return <Parent />;
}

function ContextSample() {
  const [value, setValue] = useState(true);
  return (
    <MyContext.Provider value={value ? "Good" : "Bad"}>
      <GrandParent />
      <button onClick={() => setValue(!value)}>CLICK ME</button>
    </MyContext.Provider>
  );
}

export default ContextSample;

• MyContext에 createContext로 기본값이 defalutValue인 컨텍스트를 생성했다.
• Child 컴포넌트의 text에 MyContext를 적용했다.
• 메인 컴포넌트인 ContextSample에서 text를 가져다 쓸 GrandParent컴포넌트를 MyContext태그로 감싸 사용한다.
• 기본값을 바꾸고 싶다면 Provider 컴포넌트를 사용해 value의 값을 설정한다.

객체 안에는 Provider 컴포넌트가 들어있습니다.

Provider에서 value에 값을 넣어주면 Context가 적용된 값이 바뀝니다.

Provider컴포넌트의 값이 변경되면 하위의 컴포넌트는 다시 랜더링 됩니다.

중간에 있는 컴포넌트가 렌더링 되지 않아도 해당 컴포넌트는 리렌더링됩니다.

출처

• 패스트캠퍼스 for velopert

• 별코딩-useContext + Context AP