[2일차] DO IT 리액트 프로그래밍 정석/p225 ~ p381 / 커링과 조합, 리덕스 , 컨텍스트

context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있습니다. 예를 들어, 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마(theme) props를 명시적으로 넘겨주고 있습니다.

​

class App extends React.Component { 
render() { 
return <Toolbar theme="blue" />; } 
} function Toolbar(props) 
{ return ( <div> <ThemedButton theme={props.theme} /> </div> ); 
} class ThemedButton extends React.Component 
{ render() 
{ return <Button theme={this.props.theme} />; } 
}

context를 사용하면 중간에 있는 엘리먼트들에게 props를 넘겨주지 않아도 됩니다.

​

const ThemeContext = React.createContext('blue'); 
class App extends React.Component { 
render() { 
return ( <ThemeContext.Provider value="dark"> <Toolbar /> </ThemeContext.Provider> ); } 
} 
function Toolbar() {
return ( <div> <ThemedButton /> </div> ); 
} 
class ThemedButton extends React.Component { 
static contextType = ThemeContext; render() { 
return <Button theme={this.context} />; } 
}

​

context를 사용하면 컴포넌트를 재사용하기가 어려워지므로 필요한 경우에만 사용해야 한다.

​

​

Context API

​

React.createContext

​

const MyContext = React.createContext(defaultValue);

Context.Provider

​

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

Context 오브젝트에 포함된 React 컴포넌트인 Provider는 context를 구독하는 컴포넌트들에게

context의 변화를 알리는 역할을 합니다.

Provider 컴포넌트는 ​value prop을 받아서 이 값을 하위에 있는 컴포넌트에게 전달합니다.

값을 전달받을 수 있는 컴포넌트의 수에 제한은 없습니다.

Provider 하위에 또 다른 Provider를 배치하는 것도 가능하며, 이 경우 하위 Provider의 값이 우선시됩니다.

Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다

다시 렌더링 됩니다. Provider로부터 하위 consumer(.contextType와 useContext을 포함한)로의 전파는 shouldComponentUpdate 메서드가 적용되지 않으므로, 상위 컴포넌트가 업데이트를 건너 뛰더라도

consumer가 업데이트됩니다.

​

​

Class.contextType

​

class MyClass extends React.Component { 
componentDidMount() { 
let value = this.context; 
} componentDidUpdate() {
let value = this.context; 
} componentWillUnmount() {
let value = this.context; 
} render() { 
let value = this.context; } 
} MyClass.contextType = MyContext;

React.createContext() 로 생성한 Context 객체를 원하는 클래스의 contextType 프로퍼티로 지정할 수 있습니다.

​

​

​

Context.Consumer

​

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

context 변화를 구독하는 React 컴포넌트입니다. 이 컴포넌트를 사용하면 함수 컴포넌트 안에서

context를 구독할 수 있습니다.

​

​

Context.displayName

​

Context 객체는 ​displayName 문자열 속성을 설정할 수 있습니다. React 개발자 도구는

이 문자열을 사용해서 context를 어떻게 보여줄 지 결정합니다.

​

const MyContext = React.createContext(); 
MyContext.displayName = 'MyDisplayName'; 
<MyContext.Provider> 
<MyContext.Consumer>