useContext

사용 이유

• 사용자 정보, 프로젝트 내의 환경설정과 같이 전역적으로 필요한 상태를 관리하기 위해 사용.
• 컴포넌트의 depth가 깊을 경우에 여러 컴포넌트를 거쳐 props로 값을 전달하는 불편함을 개
  선할 수 있음.

사용 예시

• Axios를 사용할 때 헤더에 사용자 token을 저장해두고 axios를 쓰기 위하여 사용하였음.
• AxiosContext.js >> Context 생성

import React, {creatContext, useState, useMemo} form 'react';
import axios from 'axios';

const AxiosContext = createContext(); 
export const AxiosProvider = ({children}) => {
	const [token, setToken] = useState({token:'',});
    
    const myAxios = useMemo(() => {
    	return axios.create({
        	headers:{
            	"Authorization": `Bearer ${token}`
            }
        })
     },[token])
     
     const value = {
     	axios: myAxios,
        token: token, 
        setToken: setToken
     };
     
     // 이 부분을 통해서 value를 넘겨줌. 
     return (
     	<AxiosContext.Provider value={value}>{children}</AxiosContext.Provider>
    );
}

export default AxiosContext;

• index.js >> 위에서 생성한 Context등록
• App 상위에 AxiosProvider를 두어 App의 모든 하위 컴포넌트에서 AxiosContext를 사용할 수 있도록 함.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { AxiosProvider } from './AxiosContext';

ReactDOM.render(
	<AxiosProvider>
    	<App/>
    </AxiosProvider>,
    
    document.getElementById("root")
 );

• Login.js >> 실제로 AxiosContext를 사용한 곳

 (...)
 import AxiosContext from './AxiosContext';
 
 const Login = ()=>{
 
 	const {axios, token, setToken} = useContext(AxiosContext); 
    
    const onSubmit = (e) => {
    	e.preventDefault(); 
     	
        featchAuth(); 
    };
    
    const featchAuth = async () => {
    	try {
        	const response = await axios.post("http:example_url.co.kr", {
            	id : form.id,
                password : form.password
             }); 
             
             if(response.data.token){
             	setToken({token: response.data.token}); 
             }
             else{
             	alert('가입하지 않은 아이디거나, 잘못된 비밀번호 입니다.');
             }
         } catch(error){
         	console.log(error);
         }     
    }
    
    return (
    	(...로그인 form...)
    );
  }
  
  export default Login;
    

🙂 useContext에 전달한 인자는 context 객체 그 자체여야 한다.
- ✅: useContext(AxiosContext)
- ❌: useContext(AxiosContext.Provider)
🙂 const {axios, token, setToken} = useContext(AxiosContext);
- AxiosContext.js에서 props로 넘겨주었던 value(axios, token, setToken)를 가져다 사용할 수 있다.
🙂 useContext를 호출한 컴포넌트는 context값이 변경되면 항상 리렌더링된다.
- AxiosContext.js에서는 useMemo를 사용하여 메모이제이제이션이 가능하도록 했다.

🛑 위의 예시는 useContext 외의 부분이 많이 생략되어있다.