Context API

alajillo·2021년 10월 17일
0

React

목록 보기
12/12
post-thumbnail

Context API

컴포넌트간의 데이터를 교환하기 위해서는 props를 이용해야 한다. 그런데 만약에

이런식으로 부모 컴포넌트가 아닌 부모의 부모 컴포넌트로 올라간다던지 자식의 자식 컴포넌트로 데이터를 전달할때에는 전달방법이 귀찮아진다.

그림에서 보면 2번만 거치면 되지만 만약에 10번을 거쳐야한다면 데이터 하나를 전송하기 위해서 전달매개체가 되는 컴포넌트가 그 데이터를 가지고 있어야 하고 그렇게되면 컴포넌트의 상태를 관리하기 힘들어진다.

이런 상황에서 context Api를 사용하면 props를 통해서 전달매개체 컴포넌트를 거칠 필요없이 바로 데이터를 전달 할수 있다.

const TaskContext = createContext();

const TaskProvider = ({ children }) => {


  return (
    <TaskContext.Provider value={{data,methods}}>
      {children}
    </TaskContext.Provider>
  );
};

export default TaskProvider;

createContext함수를 이용해서 context를 만들어 준뒤에 context를 반환해주는 함수를 만들어주면 된다.
TaskProvider는 자식컴포넌트를 받고 위에서 생성한 context인 TaskContext.Provider 컴포넌트를반환하고 props로 value를 넣어주면 하위 요소들은 언제든지 value내부에 있는 값에 접근할수 있다.
전달받는 방식은 이렇다.

<TaskProvider>
      <Children />
</TaskProvider>

TaskProvider에 있는 데이터를 사용할 Children 컴포넌트를 감싸준 뒤에 Children 컴포넌트에서 데이터를 받아서 사용하면 된다.

const data = useContext(TaskContext);

이렇게 useContext(생성된 context)를 실행시키면 데이터를 받을수 있다.

profile
Developer's High

0개의 댓글