contextapi 예제

1.기존  props 로  state 전송

//app.js
import React, {Component} from 'react';

const Family = (props) =>{
  return(
  <div className="family" style={{border:"1px solid blue"}}>
    <Person name={props.name} /> 
  </div>
  )
}

class Person extends Component{
  render(){
    return(
      <div className="person" style={{border:"1px solid red"}}>
        <p>he i;m {this.props.name}</p> 
      </div>
    )
  }
}

class App extends Component {
  render(){
    return(
        <div>
          <p>i;m app</p>
          <Person name={this.state.name}/>
          <Family name={this.state.name}/>
        </div>
    )
  }
}

export default App;

2.createContext 생성후 consumer 사용하여 하위 컴퍼넌트에  value 값 전달

import React, {Component} from 'react';

//1.createContext 생성 (react-dom깔아야함)
const MyContext = React.createContext();
//2.provider 컴퍼넌트 생성(state와 함수 보관하는 글로벌 저장소),
//provider 내부에 this.props.children 생성
//3.provider에 공통으로 적용되도록 value(연결어는 아무렇게나사용) 설정
//4.하위컴퍼넌트에 전달시 MyContext.consumer 사용
class MyProvider extends Component {
  state={
    name:'wes',
    age:100,
    cool:true
  }
  render(){
    return(
      <MyContext.Provider value ={{
        state:this.state,
        growYearOlder:()=>this.setState({
          age:this.state.age +1
        })
      }}
      // value = "i'm the value"
      >
        {this.props.children}
      </MyContext.Provider>
    )
  }
}

const Family = (props) =>{
  return(
  <div className="family" style={{border:"1px solid blue"}}>
    <MyContext.Consumer>
      {(value)=>(
          <React.Fragment>
            <p>i'm inside the consumer + state {value.state.age}</p>
            <p>Name:{value.state.name}</p>
            <button onClick={value.growYearOlder}>cake</button>
          </React.Fragment>
          //<></> 빈태그나 fragment 태그 써줘야함, compile error뜸
      )}
    </MyContext.Consumer>
    <Person />
  </div>
  )
}
class Person extends Component{
  render(){
    return(
      <div className="person" style={{border:"1px solid red"}}>

      </div>
    )
  }
}
class App extends Component {
  render(){
    return(
      <MyProvider>
        <div>
          <p>i;m app</p>
          <Family />
        </div>
      </MyProvider>
    )
  }
}

export default App;