React_Context_API_사용하기 - boostcamp-2020/IssueTracker-28 GitHub Wiki

Context API

Context란?

  • React 컴포넌트 트리 안에서 전역적 데이터를 공유할 수 있도록 만들어진 기능
  • 전역적 데이터 예) 현재 로그인한 유저, 설정(테마, 선호하는 언어,,) 등
  • context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것이다.

사용 이유

  • context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다.
  • context를 이용하면, 컴포넌트 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있다.

주의사항

  • context를 사용하면 컴포넌트를 재사용하기 어려워지기 때문에 꼭 필요할때만 쓰자!
  • 여러 레벨에 걸쳐 props를 넘기는걸 대체하는데 context보다 컴포넌트 합성이 더 간단한 해결책이 될 수 있다.

용어

  • Provider : useReducer를 사용하여 상태를 관리하는 컴포넌트. context를 사용할 컴포넌트를 Provider로 감싸주기

etc

  • 하나의 context를 만들어서 state와 dispatch를 함께 넣어주는 대신, 2개의 context를 만들어서 따로 넣어주는 이유
    • dispatch만 필요한 컴포넌트에서 불필요한 렌더링을 방지할 수 있기 때문
    • 사용하게 되는 과정이 더욱 편리해짐
  • 즉, 상태값만 필요한 컴포넌트에선 state만 사용하고, dispatch만 필요한 컴포넌트에선 dispatch만 사용
  • 예시
// context.js

// State 용 Context 와 Dispatch 용 Context 따로 만들어주기
const UsersStateContext = createContext(null);
const UsersDispatchContext = createContext(null);

// State 를 쉽게 조회 할 수 있게 해주는 커스텀 Hook
export function useUsersState() {
  const state = useContext(UsersStateContext);
  if (!state) {
    throw new Error('Cannot find UsersProvider');
  }
  return state;
}

// Dispatch 를 쉽게 사용 할 수 있게 해주는 커스텀 Hook
export function useUsersDispatch() {
  const dispatch = useContext(UsersDispatchContext);
  if (!dispatch) {
    throw new Error('Cannot find UsersProvider');
  }
  return dispatch;
}
  • context 사용을 위한 커스텀 hook을 만들 때 에러처리를 해준다면, 나중에 실수하게 됐을 때 문제점을 빨리 발견할 수 있다.
  • 예시
export function useTodoState() {
  const context = useContext(TodoStateContext);
  if (!context) {
    throw new Error('Cannot find TodoProvider');
  }
  return context;
}

useReducer

  • 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용
  • (현재 상태, 액션값) => [바뀐 상태, dispatch] return
  • 현재 상태값은 불변해야함
  • action : 액션 객체. 업데이트를 위한 정보를 갖고 있음
// action 객체 예시
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'hook 배우기'
    done: false
  }
}

장점

  • 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
  • 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다.

참고

Context API 사용법 참고

API 연동할때 Context와 함께 사용하기 참고