1. What is useContext ???

const ctx = useContext(MyContext);

상태를 관리하다 보면, 해당 state가 필요없음에도 불구하고, 자식 컴포넌트가 필요하기때문에 props로 state를 계속 내려주는 상황을 맞이하게 될 것이다. 이렇게 귀찮은 상황을 피하고, state를 전역에서 관리하는 방법은 없을까??? 그 방법이 바로 useContext이다!

2. 어떻게 사용해야 할까???

useContext를 사용하기 위해서는 몇 가지 세팅이 필요하다.

const name__of__context = React.CreateContext({states__i__want__to__manage}) 내가 전역으로 사용하고 싶은 state들을 모은 store라는 폴더를 만들어, context파일을 생성하고, 그 곳안에서 내가 관리하고 싶은 state들의 default값을 적어둔다.
<name__of__context.Provider value={{states__I__want__to__pass}}> 하위컴포넌트를 모두 감쌀 수 있도록 Context.Provider 컴포넌트를 위치시킨다.
Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달하는 역할을 하게 된다. Provider 하위의 컴포넌트들은 Provider의 value prop이 바뀔때 마다 다시 렌더링 된다.
const ctx = useContext(name__of__context) 전역으로 관리하고 있는 상태를 이용하고 싶은 컴포넌트에서 useContext를 호출한다. ****context.Consumer형태를 통해 사용 할 수도 있지만, 위의 방식이 더 깔끔하므로, 위의 방식으로 사용하자.

3. 실 사용예(developed version)

//./store/auth-context.js
import React, {useContext, useEffect, useState} from 'react';

const AuthContext = React.createContext{
	isLogged: false,
	onLogout: () => {},
	onLogin: () => {}
}

export AuthContextProvider = (props) => {
//	...write down everything that you want to write in App.js
//  such as useEffect, useState, etc. 
//  cuz at this place, I will manage all of the states
	return(
	<AuthContext.Provider value={{isLogged:isLogged, onLogout: onLogout, onLogin: onLogin}}>{props.children}	</AuthContext.Provider>
)}

export default AuthContext;

//index.js
import AuthContextProvider from './store/auth-context'
ReactDom.render(<AuthContextProvider><App /></AuthContextProvider>, document.getElementById('root'))
//이렇게 최상위 파일인 index.js에서 Provider컴포넌트로 감싸줌으로써 모든 하위 컴포넌트에서 context에 접근이 가능해 진다. 

//App.js
import React, {useContext} from 'react';
...
import AuthContext from './store/auth-context';

function App(){
	const ctx = useContext(AuthContext);
//위와 같은 방식으로 context변수를 선언하고, 필요한 state가 필요할 때마다 ctx.state__name을 이용해 접근 하면 된다. 
	return(
		...
		{!ctx.isLogged && <Login />}
		{ctx.isLogged && <Home />}
	)
}