contextAPI

• react V16.3.0부터 context API 소개(그 전까지는 불안정하다… 등등의 말이 많아서 Redux를 사용해왔다.)
• 이제는 모든 곳에 Redux를 사용할 필요가 없어졌다.
• anti redux(proof of concept)

필요 항목

• react 16.3.0
• styled-components
• styled-react
• styled-reset-styled-flex-component
• typography
  -> yarn add styled-components styled-react styled-reset-styled-flex-component typography

Creating the Store

// store.js
import  React  from  'react';
export  const  Store = React.createContext(null);
export  default  Store;

// Provider 생성
import  Store  from  '../../store';

class  App  extends  Component {
 render() {
  return (
   <Store.Provider>
    <App  />
   </Store.Provider>

  );
 }
}

Consuming the Store

// Provider에 value 넘겨주기
state = { message:  "Hello" }

componentDidMount = () => {
 setTimeout(() => {
  this.setState({
   message:  "Bye"
  });
 }, 2000);
}

return (
 // 상태가 바뀌면 자동으로 value값이 바뀌어서 보여짐
 <Store.Provider  value={this.state}>
  <App  />
 </Store.Provider>
)

// 사용하려는 컴포넌트에서
import  Store  from  '../../store';

render() {
 return (
 ... 
 // <Store.Consumer />안에 span같은 element는 사용할 수 없음
 <Store.Consumer>{store  =>  JSON.stringify(store.message)}</Store.Consumer>
 );
}

Updating the Store

provider에 포함시키고 싶은 함수는 constructor에 있어야 한다.

class  App  extends  Component {
 constructor(props) {
  super(props);

  _changeMessage = () => {
   if (this.state.message === "Hello") {
    this.setState({ message:  "Bye bye" });
   } else {
    this.setState ({ message:  "Hello" });
   }
  }

  this.state = {
   message:  "Hello",
   changeMessage:  this._changeMessage
  };
 }

 render() {
  return (
   <Store.Provider  value={this.state}>
    <App  />
   </Store.Provider>
  )
 }
}

Conclusions

suspense API

• component는 데이터가 있을 때까지 rendering되지 않는다.(리액트는 항상 로딩상태)
• 데이터가 로딩되었는지, 상태 바꾸고 등등의 일은 하지 않아도 된다.

참고

• anti-redux
• nomadcoders
• react-suspense