[React] useContext

useContext는 상위 컴포넌트에서 어떠한 데이터를 하위 컴포넌트로 전달하기 위해서 전역 변수 등의 데이터로 사용할 수 있도록 해주는 훅이다.

Redux와 유사한 기능을 하는데, 차이점은 상태 관리의 복잡도에 있다.

Redux는 복잡하고 거대한 상태를 관리하는데에 용이한 반면, useContext, 즉 Context API는 간단한 데이터(로그인 인증 등)를 상태로 관리한다.

 

 

간단히 사용법을 알아보자면,

import React, { createContext, useState, useEffect } from 'react';

// Context 생성
const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
  	const AuthToken = Cookies.get('isLogged');
    if(AuthToken) {
      setIsAuthenticated(true);
    } else {
      setIsAuthenticated(false);
    }
  }, []);

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

 

이렇게 하면 이제 AuthContext를 통해서 전역 변수를 불러올 수 있다.

 

불러오는 컴포넌트에서는,

import React, { useContext } from 'react';
import { AuthContext, AuthProvider } from './context/AuthContext';

const Test = () => {
	const { isAuthenticated } = useContext(AuthContext);
    
    return (
    	<Header isAuthenticated={isAuthenticated} />
    )
}

...

 

이런식으로 useContext(AuthContext);로 가져올 수 있다.

 

다만, useContext를 사용할 경우 상태이기 때문에 값의 변화가 발생하면 리랜더링이 발생하니 주의해야한다.

(참조값 변화로 인한 불필요한 리랜더링 등을 막기 위해 useMemo등을 사용하자)