React - Context 사용

목표

React 자체 기능만을 사용하여 글로벌 상태를 사용해보자.

 

도입

보통 React 프로젝트를 진행하면서 글로벌 상태를 사용하고 관리하기 위해 Redux 라이브러리를 많이 사용합니다만, 소규모 애플리케이션에서는 Redux를 도입하는게 공수적인 측면에서 손해일 수도 있겠다는 생각이 들어 다른 방법을 찾아보게 되었습니다.

 

React Context 공식 설명

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

 

API

1. React.createContext

const MyContext = React.createContext(defaultValue);

2. Context.Provider

<MyContext.Provider value={/* 어떤 값 */}>

 

3. Class.contextType

class MyClass extends React.Component {
  componentDidMount() {
    let value = this.context;
    /* MyContext의 값을 이용한 코드 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* ... */
  }
}
MyClass.contextType = MyContext;

 

4. Context.Consumer

<MyContext.Consumer>
  {value => /* context 값을 이용한 렌더링 */}
</MyContext.Consumer>

 

실제 사용해보기

Context를 생성합니다.

생성한 Context를 다른 컴포넌트에서 가져올 수 있게 export해 줍니다.

//App.js
export const UserContext = React.createContext(null);

 

Provider컴포넌트를 사용합니다.

//App.js
render() {
	return (
		<UserContext.Provider value="contextValue">
			// Context를 구독하는 컴포넌트들을 이 안에서 불러줍니다.
			// 이 안의 컴포넌트들은 이제 context의 변화를 알 수 있습니다.
			// Provider가 context의 변화를 알리는 역할을 합니다.
		</UserContext.Provider>
	)
}

 

하위 컴포넌트에서 Context Consumer를 통해 context에 value를 사용할 수 있습니다.

import { UserContext } from '../../../../../App'; // export한 UserContext를 불러옵니다.


class FooComponent extends React.Component {
	render() {    
		return (
			<UserContext.Consumer>
				{value =>
					<Text>value</Text>
				}
			</UserContext.Consumer>
		)
	}
}

 

 

참고 : https://ko.reactjs.org/docs/context.html