useContext?

usecontext는 state, props 등을 전역적으로 관리할 수 있게 해주는 리액트에서 제공하는 hook이다.

Why usecontext

우리는 리액트 프로젝트에서 state, props 등을 하위 컴포넌트로 내려주면서 사용할 수 있다 그런데 굳이 usecontext hook이 왜 필요할까 만약 부모에서 자식으로 바로넘겨줘 사용할 수 있으면 상관없겠지만 중간컴포넌트를 많이 거쳐야하고 프로젝트가 커서 개수가 많아진다면? 가독성도 떨어지고 중간에 수정사항이라도 생긴다면 여간 귀찮은 일이 아닐수 없을 것 이며 디버깅에도 어려움이 많을 것 이다

하지만 usecontext를 사용하면 직접 데이터를 내려주지 않아도 해당 데이터가 필요한 컴포넌트 들이 직접 뽑아서 사용할 수 있다

Redux vs usecontext

흔히 많이 보이는 주제이다 내 생각에는 둘 중 뭐가 더 좋은지 가 아니라 프로젝트의 방향이나 규모에 따라 어떤 것 을 사용해야 할지 정해야 한다고 생각한다

• 단순히 props drilling을 피하기 위한 목적인가?
• 전역적으로 관리해야 할 데이터들이 많은가?
• 그 데이터 들이 계속 변하는 것 들인가?
• 프로젝트의 규모가 큰가?

크게 4가지 정도의 고민을 가지고 선택을 하는 것이 맞다고 생각한다

• 프로젝트 규모가 크지 않고 전역적으로 관리할 데이터가 거의 변하지 않는 것 들이다 -> useContext(context를 호출한 컴포넌트는 context 값이 변하면 리렌더링 된다! 따라서 최적화를 위한 메모제이션 작업을 같이해주면 좋다)

• 프로젝트 규모가 크고 전역적으로 관리할 데이터가 자주 바뀌는 것 들이다 -> Redux(hook 보다 강력한 기능들이 많다)

처음엔 단순히 이렇게 접근해도 될 듯 하다

usecontext 사용법

먼저 다른 컴포넌트들이 전역적으로 사용할 데이터들이 있는 store를 먼저 만들자(createContext)

프로젝트 최상단에 바로 만들어도 되지만 나는 보통 따로 폴더를 만들어서 사용하는 편 이다.

import react, {createContext} from 'react';

초기값을 설정해주자

import react, {createContext} from 'react';

export stateContext = createContext(null);

이제 store를 만들어 보자

import react, {createContext} from 'react';

export stateContext = createContext(null);

function store({ children }) {
  // 기본적으로 사용할 상태들
  const initialState = {
    isLogin: true,
    ...
  }
  return (
    <stateContext.Provider value={initailState}>
      {children}
    </stateContext.Provider>
    ) 
}

export default Store

그다음 store를 사용할 컴포넌트에 감싸주자

import React from 'react';
import Store from './store';

//App.js
export default function App() {
  return (
    <Store>
      <Component />
      ...
    </Store>
  )
}

store를 사용할 컴포넌트에서 뽑아서 사용하자

import React, { useContext } from 'react';
import { stateContext } from './store';

//Component.js
export default function Component() {
  
  const context = useContext(stateContext);
  
  //context.initialState.isLogin ~ ... 으로 접근하여 사용할 수 있다
  
  return (
    ...
  )
}

이정도로 간단하게 usecontext 사용법을 알아봤다
상태뿐만아니라 함수도 전역적으로 사용할수 있다 위예시는 간단한 사용법만 작성했고 사용하기에 따라 더 유연하게 사용할 수 있다