# 177 [udemy React 완벽 가이드 노트] 클래스 컴포넌트와 컨텍스트

클래스 컴포넌트에서 컨텍스트 써보기

 

1. Context.consumer 컴포넌트

---

함수형, 클래스 컴포넌트에 모두 쓸 수 있다. 

 

 

 render() {
    return (
      <>
        <UsersContext.Consumer>
        </UsersContext.Consumer>

이런식으로 말이다. 

 

 

useContext를 이용하면 useContext를 여러 번 호출하고 

매 번 다른 컴포넌트를 가리킴으로써 

하나의 컴포넌트에서 여러 개의 컨텍스트를 받아 올 수 있다. 

 

 

클래스 컴포넌트에서는 한 번에 하나의 컨텍스트만 연결할 수 있다. 

그것을 위해 static 프라퍼티를 추가한다. 

 

 

 

static 프로퍼티

---

class UserFinder extends Component {
  static contextType = UsersContext;

이렇게 하면 리액트에게 이 컴포넌트는

UsersContext라는 컨텍스트에 접근할 수 있다고 전달하는 것이다. 

그러나 이것은 단 한번만 설정할 수 있다. 

두가지 이상 컨텍스트가 연결되어야 한다면 다른 방법을 찾아봐야 한다. 

 

 componentDidMount() {
    this.setState({ filteredUsers: this.context.users });
  }

일단 여기서는 한가지만 설정되었기 때문에 

this.context.users로 users에 접근할 수 있게 되었다.