Builder.shin

React 16.3 Context API로 Redux 의존도 줄이기

문제 상황

사용자 인증 정보와 테마 설정 같은 간단한 전역 상태를 관리하기 위해 Redux를 사용하고 있었다. 하지만 액션, 리듀서, 커넥트 컴포넌트 등 보일러플레이트가 많아 신규 개발자가 코드를 이해하는 데 시간이 오래 걸렸다.

Redux는 여전히 복잡한 상태 관리에 유용하지만, 단순히 props drilling을 피하기 위한 용도로는 과하다는 판단이었다.

Context API 적용

React 16.3부터 정식 API로 포함된 Context를 사용해 사용자 인증 상태를 관리하도록 변경했다.

// AuthContext.js
import React from 'react';

const AuthContext = React.createContext({
  user: null,
  login: () => {},
  logout: () => {}
});

export class AuthProvider extends React.Component {
  state = {
    user: null
  };

  login = (userData) => {
    this.setState({ user: userData });
  };

  logout = () => {
    this.setState({ user: null });
  };

  render() {
    return (
      <AuthContext.Provider
        value={{
          user: this.state.user,
          login: this.login,
          logout: this.logout
        }}
      >
        {this.props.children}
      </AuthContext.Provider>
    );
  }
}

export const AuthConsumer = AuthContext.Consumer;

사용하는 쪽에서는 Consumer 패턴으로 간단히 접근할 수 있다.

// Header.js
import { AuthConsumer } from './AuthContext';

const Header = () => (
  <AuthConsumer>
    {({ user, logout }) => (
      <div>
        {user ? (
          <button onClick={logout}>로그아웃</button>
        ) : (
          <a href="/login">로그인</a>
        )}
      </div>
    )}
  </AuthConsumer>
);

결과

  • Redux 관련 코드 약 200줄 제거
  • 인증 관련 상태 변경 시 수정 지점이 한 파일로 집중됨
  • 여전히 복잡한 비즈니스 로직은 Redux를 유지

성능 이슈가 우려되었지만, Context 값이 변경되는 빈도가 낮아 문제없었다. 모든 곳에 Context를 적용하기보다는 적절한 구분이 필요하다는 걸 확인했다.

React 16.3 Context API로 Redux 의존도 줄이기