[React] Context API

🌱 Intro

일반적으로 데이터는 Props을 통해 컴포넌트에 전달 되는데 항상 문제가 되는 건 state를 여러 컴포넌트를 통해 전달하는 경우이다. 즉 기본적으로는 Props을 활용해 다른 컴포넌트에 데이터를 전달한다. 상위 컴포넌트의 데이터를 하위 컴포넌트가 사용하기 위해서 Props를 내려받는데, 상위 - 하위 - 하위의 하위 컴포넌트가 데이터를 넘겨 받는 경우에는 Props를 계속 이어서 내려주는 형태가 된다. 하지만 하위의 하위 컴포넌트가 데이터를 사용하기 위해 상위에서 하위로 Props를 내려 주고 하위에서 하위의 하위 컴포넌트에 Props를 넘겨주는데 이 하위 컴포넌트에서 이 데이터를 사용하지 않는다면 앱이 크다면 점점 Props의 드릴링이 깊어질 수 있다.

이런 문제를 해결할 수 있다...?

두말하면 잔소리...

Context API를 이용해보자...

📌 Context API

• 리액트 내장 기능으로 컴포넌트에게 Props를 사용하지 않고도 필요한 데이터를 넘겨주며 사용할 수 있게 해 준다.
• props drilling 대신 사용하는 데에 유용하고, provider 내부에서 상태 변경이 거의 일어나지 않는다면, 해당 상태를 전달하는 용도로 쓰는 데에 적절하다.

이렇게 리액트 내부적으로 stste를 관리해 주는 Context API를 사용하여, 앱의 어떤 컴포넌트에서라도 직접 변경해 앱의 다른 컴포넌트에 직접 전달하려면 어떻게 해야 할까? 🤔

나의 경우에는 어떤 Tab인지를 구분하여 Tab별로 카테고리에 맞는 컴포넌트를 보여 주기 위해서 Tab의 상태를 관리하기 위해 context API를 사용하고자 했다! 상태 변화가 그렇게 크게 일어날 것 같지 않고, 여러 컴포넌트로 은근 나누어져 있어서 props 드릴링이 일어났기 때문에 사용하지 않는 컴포넌트에 props 전달을 하지 않으려고 사용하게 되었다. 그리고 상태 관리로 리덕스는 사용해 보았지만... context API는 사용한다한다 하고 한 번도 사용한 적이 없었기에 이번 기회에 사용하기로 했다!

1. Context 생성

import React, {
  PropsWithChildren,
  createContext,
  useState,
  useMemo,
} from 'react';
import Tab from '../constants/Tab';

interface TabContextType {
  currentTab: string;
  setCurrentTab: React.Dispatch<React.SetStateAction<string>>;
}

export const TabContext = createContext<TabContextType>({
  currentTab: Tab.All,
  setCurrentTab: () => {},
});

/*
 createContext를 사용하여 context를 생성한다! 인자로는 초기값을 넣어 주었다!
 const TabContext = React.createContext() 와 같이 context를 생성해도 된다.

 Context를 생성하면 Context 안의 Provider 라는 컴포넌트를 통해 Context의 값을 정할 수 있다. 
 그 값은 value로 정하여 설정한다!
 아래와 같이 TabProvider를 만들어 상태를 사용하려는 컴포넌트의 상위로 감싸 주면 된다.
 
 <TabProvider>
	<상태를 사용할 컴포넌트>
 </TabProvider>
 
*/ 

function TabProvider({ children }: PropsWithChildren<{}>) {
  const [currentTab, setCurrentTab] = useState<string>(Tab.All);

  const value = useMemo(
    () => ({ currentTab, setCurrentTab }),
    [currentTab, setCurrentTab],
  );

  return <TabContext.Provider value={value}>{children}</TabContext.Provider>;
}

export default TabProvider;

근데 이렇게 context 적절하게 잘 생성했다고 생각했는데 오류 투성이가 떠서 왜 그러지...? 했는데 return을 jsx로 되고 있어서 파일 확장자를 ts로 해 두어서 오류 투성이가 되었다... 확장자 확인 잘하자...! 참고

2. 상태 값 사용

// 상태값을 사용하기 위해서는 우선 useContext를 import 한다.
import { useContext } from 'react';

// 그리고 createContect를 통해 만들었던 Context 또한 import 한다.
import { TabContext } from  '../context/TabContext';


/*
  사용하려는 데이터를 꺼내어 사용하면 된다. 
  나는 구조분해할당을 통해 데이터를 바로 사용했지만
  const value = useContext(TabContext);
  와 같이 하여 value.currentTab 과 같이 사용해도 무방하다.
*/

const { currentTab } = useContext(TabContext);

이렇게 하면 무지성 props로 넘겨 주었던 부분도 깔끔하게 삭제가 되고 사용하는 컴포넌트에만 데이터를 불러와 사용이 가능하다. 이렇게 좋은 context API에도 단점이 있엇으니 , , ,

단점...

• 상태값을 변경하면 provider로 감싼 모든 자식 컴포넌트들이 리렌더링을 하기 때문에 Context API를 상태관리를 하기 위해 사용한다면 잦은 상태 변경이 일어나게 된다면 리렌더링이 일어나지 않도록 방어해야 한다.