정중식의 개발공부로그

ContextAPI

17 Sep 2023 | react next

ContextAPI란

React가 자체적으로 제공하는 상태관리 방법이다.
데이터를 공유하기 위한 방법으로 사용한다.
Ex)로그인한 사용자 정보, 테마,언어 설정 등등

장점

  • props Drilling를 피하고 컴포넌트 간 상태를 쉽게 공유 가능하다.
  • 추가적인 라이브러리 설치가 필요없다.

단점

  • 복잡한 상태관리는 어려울 수 있다.
  • 너무 많은 context를 사용하면 컴포넌트 재사용성이 떨어진다.(컴포넌트가 거기에 의존하게되서)

사용예시

  • 로그인 유저 정보가져오기

index.tsx 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
import { AuthContextProvider } from 'context/AuthContext';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <AuthContextProvider>
    <Router>
      <App />
    </Router>
  </AuthContextProvider>
);

AuthContext.tsx

import { ReactNode, createContext, useState, useEffect } from 'react';
import { User, getAuth, onAuthStateChanged } from 'firebase/auth';
import { app } from 'firebaseApp';

interface AuthProps {
  children: ReactNode;
}
// 전역 상태 값
const AuthContext = createContext({
  user: null as User | null,
});

export const AuthContextProvider = ({ children }: AuthProps) => {
  const auth = getAuth(app);

  const [currentUser, setCurrentUser] = useState<User | null>(null);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      if (user) {
        setCurrentUser(user);
      } else {
        setCurrentUser(user);
      }
    });
  }, [auth]);

  return (
    <AuthContext.Provider value=>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthContext;

이제 유저정보 가져올때는 이렇게 사용해주면된다.

import AuthContext from 'context/AuthContext';
import { useContext } from 'react';

const { user } = useContext(AuthContext);

Related Posts