useContext
- context이용시, 트리 단게마다 명시적으로 props를 넘겨주지 않고도 컴포넌트가 값을 공유할 수 있다
- useContext는 Context.Provider과 같이 사용된다
context를 써야하는 경우
- 예를 들어, 로그인한 유저, 테마, 선호하는 언어 등의 전역적 데이터를 공유할 때 (아래는 테마를 통한 예시)
- 기존 방식: 테마 인수를 명시적으로 넘겨주기
- 정보를 일일이 넘겨주고 있음
- App > Toolbar > ThemedButton
-
class App extends React.Component {
render() {
return <Toolbar theme = "dark" />;
}
}
function Toolbar(props) {
return (
<div>
<ThemeButton theme={props.theme} />
</div>
);
}
class ThemeButton extends React.Component (
return() {
return <Button theme={this.props.theme} />;
}
}
- context를 이용한 방식
- (1) : light를 기본값으로 하는 ThemeContext를 만들었음
- (2): Provider를 이용하여 dark값을 선택값으로 보냄
- (3): 중간에 걸쳐있는 Toolbar 컴포넌트는 속성을 넘겨줄 필요없이 호출만 담당함
- (4): (1)에서 설정한 ThemeContext를 이용할 것이라고 정해줌
- (5): 여기서 사용하는 context는 (2)에서 선택된 dark 테마를 가지게 됨(최종)
-
//light를 기본값으로 하는 테마 theme context를 만듦
const ThemeContext = React.createContext('light'); // (1)
class App extends React.Component {
render() {
return (
<ThemeContext.Provider value="dark"> {/* (2) */}
<Toolbar />
</ThemeContext.Provider>
);
}
}
function Toolbar() {
return (
<div>
<ThemedButton /> {/*/ (3) */}
</div>
);
}
class ThemeButton extends React.Component {
static contextType = ThemeContext; // (4)
return() {
return <Button theme={this.context} />; // (5)
}
}
context사용에서 고려해야하는 것
- context를 사용하면 컴포넌트를 재사용하기가 어려워진다
- context보다 컴포넌트 합성이 더 간단한 해결책인 경우도 있다