Consumer 사용하기

Consumer 는 컴포넌트에서 Context 를 사용해야 할 때에 사용됩니다.

값 보여주기

Receives 에서 context 안에 있는 값을 보여줘봅시다. 컴포넌트를 다음과 같이 작성해보세요.

`src/components/Receives.js`

import React from 'react';
import { SampleConsumer } from '../contexts/sample';

const Receives = () => {
  return (
    <SampleConsumer>
      {
        (sample) => (
          <div>
            현재 설정된 값: { sample.state.value }
          </div>
        )
      }
    </SampleConsumer>
  );
};

export default Receives;

그러면 이렇게, 우리가 기존에 설정했던 기본값이 보여질 것입니다.

여기서 JSX 내부에서 { (sample) => ... } 이런식으로 작성해주었는데, 이것은 Render Props 라는 패턴입니다.

우리가 방금 작성한 코드는 비구조화 할당 문법을 사용하면 다음과 같이 작성 할 수도 있답니다

      {
        ({state}) => (
          <div>
            현재 설정된 값: { state.value }
          </div>
        )
      }

준비한 actions 호출하기

이번엔 우리가 기존에 준비했던 actions 를 통해서 값을 변경해보겠습니다. 이번에 컴포넌트를 구현하기 위해선, 단순히 render 에서만 필요한게 아니라, 내부에 있는 메소드에서도 필요로 합니다. 그렇기에 아까전에 했던것처럼 render 에서 Consumer 를 사용하는 형태로 구현하지 않고, SendsContainer 라는 컨테이너 컴포넌트를 추가적으로 만들어서 props 로 필요한 값을 전달하는 방식으로 구현해주겠습니다.

`src/components/Sends.js`

import React, { Component } from 'react';
import { SampleConsumer } from '../contexts/sample';

class Sends extends Component {

  state = {
    input: ''
  }

  componentDidMount() {
    // :: 초기 값 설정
    this.setState({
      input: this.props.value,
    })
  }

  handleChange = (e) => {
    this.setState({ input: e.target.value });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // :: props로 받은 setValue 호출
    this.props.setValue(this.state.input);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input value={this.state.input} onChange={this.handleChange}/>
        <button type="submit">설정</button>
      </form>
    );
  }
}

// :: Consumer 를 사용하여 context 값을 전달해준 컨테이너 컴포넌트
const SendsContainer = () => (
  <SampleConsumer>
    {
      ({state, actions}) => (
        <Sends 
          value={state.value}
          setValue={actions.setValue}
        />
      )
    }
  </SampleConsumer>
)

// :: Sends 대신에 SendsContainer 를 내보내줌
export default SendsContainer;

이제 값을 수정 할 수 있을 것입니다!

Consumer 사용하기