[💎React] useContext는 언제 써야할까?

Why ContextAPI?

props drilling 을 피할 수 있고, 어디서든 특정한 데이터를 사용할 수 있는 방법으로 useContext 훅이 있다. 상태관리 도구는 아니고, 그저 상태를 공유할 수 있는 기능이다!(Redux는 상태관리까지 가능)

how to use it

보통 src/context 폴더를 따로 생성하고 그 안에 context provider components를 만들어 사용하는 것 같다. (App.jsx에 써도 되긴하지만, 공유해야하는 데이터가 많아지면 App.jsx에 로직이 너무 많아지는 부작용이 발생할 수 있기 때문에)
내가 사용할 컴포넌트 구성 요소 외부에 생성해 정보를 전달해야 함을 잊지 말자.

//src/context/MemeContext.tsx
const {createContext,useState} from 'react'

export const MemeContext=createContext(null) 
// context를 하나 만들고 Provider로 래핑해주면 이것이 감싼 모든 곳에서 데이터를 뽑아쓸수있다.
export const MemeContextProvider=({children})=>{ 
  const [isToggle,setIsToggle]=useState(false)
  const value={isToggle,setIsToggle}
  return(
    <MemeContext.Provider value={value}>{children}</MemeContext.Provider>
   )
}

그 다음 contextProvider로 최상위 App.tsx를 래핑하면 끝!

// src/App.tsx
import { MemeContextProvider } from './context/MemeContext';
function App() {
  return (
    <MemeContextProvider>
     본문입니다
    </MemeContextProvider>
  );
}

export default App;
                                    

drawback of ContextAPI

지금은 isToggle,setIsToggle밖에 안썼지만, 만약 context내 단일값만 변경되었다고해도 전체 컨텍스트가 기술적으로 변경되므로 해당 context를 사용하지 않는 컴포넌트까지 다 렌더링되며 호출된다는 단점이 있다. 이는 프로젝트의 속도와 성능 저하를 일으킬 수 있다. 그러므로 지속적으로 업데이트 될 여지가 있는 데이터는 context안에 최대한 넣지 말아야 한다.
isModalOpen,setIsModalOpen 같은 걸 넣을 게 아니라 (그동안 열심히 App.jsx에 modal 오픈여부 context에 집어넣었던 나..반성해...)

const [user,setUser]=useState(null)
const [isAuth,setIsAuth]=useState(false)

위와 같이 전역적으로 사용 + 거의 변경될 여지가 없는 것들만 context 안에 넣어야 한다. 그 외의 건 차라리 props drilling 하는 편이 낫다.

그리고 context를 꼭 전역적으로 사용할 필요는 없다. 프로젝트 내 로직을 생각해보고 그 context가 필요한 것들만 해당 context로 감싸도 된다.(ProfileContext, PostsContext, FriendsContext,...) 그치만 이것 역시 불필요한 렌더링을 일으킬 수 있는 여부는 어쩔 수 없다. 우리는 그런 것들을 최소화할 필요가 있다!!
그래서 나온 대안들 중 대표적인 예시가 바로 redux, redux-toolkit, recoil, zustand 등이 있다.

redux VS context API

<참고>
PedroTech
준혁과 컴퓨터 티스토리