[React] createContext

createContext

createContext는 components가 제공하거나 읽을 수 있는 context를 만들어낸다.

const SomeContext = createContext(defaultValue)

Parameters

• defaultValue
  - 정적인 값이며, 변화하지 않는 값이다. last resort fallback이다.
  

SomeContext

• SomeContext.Provider : components에 context value를 제공한다.
• SomeContext.Consumer : context value 를 읽는 방법인데 거의 안 쓴다.

function App() {  
const [theme, setTheme] = useState('light');  
// ...  
return (  
	<ThemeContext.Provider value={theme}>  
		<Page />  
	</ThemeContext.Provider>  
	);  
}

Page 안에서는 얼마나 그 tree에서 깊은 곳에 위치해있든 theme이라는 값을 전달받을 수 있다.

Usage

Creating context

context에서 핵심은 단 두 개다.

• tree 깊이와 상관없이, 값을 전달할 수 있다.
• prop 필요없다.

context의 특징

• 정적인 값을 전달할 수 있다.
• 동적인 값을 전달할 수 있다.
• context values가 바뀔 때, 전달받는 모든 components는 re-render된다.

Import and export context