💻 Context(feat. 리액트 공식문서)

⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다.

📃 오늘 공부한 것

언제 context를 써야 할까

context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다.

아래 코드는 버튼 컴포넌트를 꾸미기 위해 theme props를 명시적으로 넘겨주고 있다.

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  // Toolbar 컴포넌트는 불필요한 테마 prop를 받아서
  // ThemeButton에 전달해야 합니다.
  // 앱 안의 모든 버튼이 테마를 알아야 한다면
  // 이 정보를 일일이 넘기는 과정은 매우 곤혹스러울 수 있습니다.
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 된다.

// ThemeContext 만들기
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Provider를 이용해 하위 트리에 테마 값을 보내준다.
    // 아래 예시에서는 dark를 현재 선택된 테마 값으로 보낸다.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 이젠 중간에 있는 컴포넌트가 일일이 테마를 넘겨줄 필요가 없다.
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 현재 선택된 테마 값을 읽기 위해 contextType을 지정하고 가장 가까이 있는 테마 Provider를
  // 찾아 그 값을 사용, 현재 선택된 테마는 dark이다.
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

context를 사용하기 전에 고려할 것

context의 주된 용도는 다양한 레벨에 많은 컴포넌트에게 데이터를 전달하는 것이다. 하지만 context를 사용하면 컴포넌트를 재사용하기가 어려워짐

여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다.

컴포넌트 합성이란

아래처럼 props를 계속 전달해야하는 경우

<Page user={user} avatarSize={avatarSize} />
<PageLayout user={user} avatarSize={avatarSize} />
<NavigationBar user={user} avatarSize={avatarSize} />
<Link href={user.permalink}>
  <Avatar user={user} size={avatarSize} />
</Link>

Avatar 컴포넌트 자체를 넘겨주면 context를 사용하지 않고 이를 해결할 수 있다.

function Page(props) {
  const user = props.user;
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={user} size={props.avatarSize} />
    </Link>
  );
  return <PageLayout userLink={userLink} />;
}

<Page user={user} avatarSize={avatarSize} />
<PageLayout userLink={...} />
<NavigationBar userLink={...} />
{props.userLink}

제어의 역전(IoC)을 이용하면 넘겨줘야 하는 props 수는 줄고 최상위 컴포넌트의 제어력은 더 커지기 때무넹 더 깔끔한 코드를 쓸 수 있다. 하지만 복잡한 로직을 상위로 올리면 컴포넌트는 더 난해해지고 하위 컴포넌트는 더 유연해져야 하기 때문에 항상 옳은 방법은 아니다.

같은 데이터를 트리 안 여러 레벨이 있는 많은 컴포넌트에 주어야 할 경우, 데이터 값이 변할 때마다 모든 컴포넌트에 널리 말하는 것이 context이다.

API

React.createContext

const MyContext = React.createContext(defaultValue);

context 객체를 만든다. Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때 React는 트리 상위에서 가장 가까이 있는 짝이 맞는 Provider로부터 현재 값을 읽는다.

defaultValue는 적절한 Provider를 찾지 못했을 때만 쓰이는 값이다. 즉, 값을 넣어도 provider가 존재하면 읽지 않는다.

Context.Provider

<MyContext.Provider value={/* 어떤 값 */}>

Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 한다. value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달한다.

Provider의 value가 바뀔 때마다 다시 렌더링 된다. 값이 바뀌었는지 여부는 Object.is와 동일한 알고리즘을 사용한다.

Class.contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* MyContext의 값을 이용한 코드 */
  }
  componentDidUpdate() {
    let value = this.context;
  }
  componentWillUnmount() {
    let value = this.context;
  }
  render() {
    let value = this.context;
  }
}
MyClass.contextType = MyContext;

React.createContext()로 생성한 Context 객체를 원하는 클래스의 contextType 프로퍼티로 지정할 수 있다. 이 프로퍼티를 활용해 클래스 안에서 this.context를 이용해 해당 Context의 가장 가까운 Provider를 찾아 그 값을 읽을 수 있고이 값은 render를 포함한 모든 컴포넌트 생명주기 매서드에서 사용할 수 있다.

단, Class.contextType을 사용하면 하나의 context만 구독할 수 있다.

Context.Consumer

<MyContext.Consumer>
  {value => /* context 값을 이용한 렌더링 */}
</MyContext.Consumer>

context 변화를 구독하는 React 컴포넌트이다. 이 컴포넌트를 사용하면 함수 컴포넌트 안에서 context를 구독할 수 있다. Context.Consumer의 자식은 함수여야 한다. 이 함수는 context의 현재값을 받고 React노드를 반환한다.

Context.displayName

Context 객체는 displayName 문자열 속성을 설정할 수 있다. 이 문자열을 사용해서 context를 어떻게 보 여줄 지 결정한다.

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

<MyContext.Provider> // "MyDisplayName.Provider" in DevTools
<MyContext.Consumer> // "MyDisplayName.Consumer" in DevTools

Hook

useContext

const value = useContext(MyContext);

context객체를 받아 그 context의 현재 값을 반환한다. context의 현재 값은 트리 안에서 이 Hook을 호출하는 컴포넌트에 가장 가까이에 있는 <MyContext.Provider>의 value prop에 의해 결정된다.

useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 될 것입니다. 컴포넌트를 리렌더링 하는 것에 비용이 많이 든다면, 메모이제이션을 사용해 최적화할 수 있다.

useContext(MyContext)는 클래스에서의 static contextType = MyContext 또는 <MyContext.Consumer>와 같다고 볼 수 있다.

주의사항

다시 렌더링할지 여부를 정할 때 참조를 확인하기 때문에, Provider의 부모가 렌더링 될 때마다 불필요하게 하위 컴포넌트가 다시 렌더링 되는 문제가 생길 수도 있다.

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{something: 'something'}}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

이를 피하기 위해서는 부모의 state값으로 끌어올리면 된다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <MyContext.Provider value={this.state.value}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

러북 프로젝트 context 코드 뜯어보기

UserContext/index.js

import React, { createContext, useContext, useReducer } from 'react'
import useActions from './actions'
import { reducer } from './reducer'

export const useUserContext = () => {
  const context = useContext(UserContext)
  if (context === undefined) {
    throw new Error('useUserContext was used outside of its Provider')
  }
  return context
}

const UserContext = createContext()

const UserContextProvider = ({ children }) => {
  const [currentUserState, dispatch] = useReducer(reducer, initialUserData)
  const { onAuth, onLogin, onLogout, onSignUp, onUpdate } = useActions(dispatch)

  return (
    <UserContext.Provider
      value={{ currentUserState, onAuth, onLogin, onLogout, onSignUp, onUpdate }}
    >
      {children}
    </UserContext.Provider>
  )
}

export default UserContextProvider

useContext훅을 사용해서 변화를 감지하여 컴포넌트를 다시 렌더링 하도록 구성하였다. 또한 useReducer훅도 사용하면서 유저 정보를 업데이트 할 수 있도록 하였다.

또한 action을 value로 넘겨 행해진 action에 따라 다른 상태 변환을 할 수 있도록 구현하였다.

App.js

import UserContextProvider from '@contexts/UserContext'
import AppRouter from '@routes'

function App() {
  return (
    <UserContextProvider>
      <AppRouter />
    </UserContextProvider>
  )
}

export default App

App.js 즉 모든 페이지에서 유저 정보를 사용하기 때문에 App을 Provider로 감싸서 전달 할 수 있도록 하였다.

useActions

const useActions = (dispatch) => {
  const onLogin = useCallback(
    async (userInfo) => {
      dispatch({ type: SET_LOADING })

      const { user, token } = await login(userInfo)
      setItem('jwt_token', token)

      dispatch({ type: SET_USER, payload: { user, token } })
    },
    [dispatch]
  )

  return {
      onLogin
	}
}

export default useActions

useActions를 만들어 dispatch메서드로 타입을 넣어 상황에 맞게 상태가 저장될 수 있도록 하였다.

reducer

import { SET_USER } from './constants'

export const reducer = (state, { type, payload }) => {
  switch (type) {
    case SET_USER:
      return {
        ...state,
        currentUser: payload.user,
        token: payload.token,
      }
    default:
      throw new Error(`Unknown action type: ${type}`)
  }
}

다음과 같이 reducer를 만들어 dispatch 메서드와 짝의 형태로 state를 반환할 수 있도록 하였다.

🔥 느낀점

러북 프로젝트를 진행할 때 context로 유저 정보를 관리 하기 위해 사용하였는데 시간이 조금 지나서 어떻게 구현했었는지 조금 가물가물했다.
이번에 다시 공부하면서 프로젝트를 뜯어보았는데 어떻게 context를 사용하는지 프로젝트 예제를 통해 다시 확인할 수 있어서 좋았다.

Refer

• 리액트 공식문서 - context