[React / RN] Context API (Anti Redux!) with Hooks

 

React Context API: React 16.3 이후 생김

 

- context api를 hooks와 사용하기 위해 참고한 링크

 

https://dev.to/nazmifeeroz/using-usecontext-and-usestate-hooks-as-a-store-mnm

Using useContext and useState hooks as a store

https://velog.io/@i_thank/React-Context-API

React Context API with Hook

진짜 최고다!

 

 

Before Hooks 

React v16.3.0: New lifecycles and context API – React Blog

Redux: 하나의 행동으로 다른 컴포넌트에 영향을 준다 1:N. one to many

 

1. repo 하나 만들고

git remote add origin https://github.com/daheeahn/context-anti-redux.git

 

(리모트 삭제: git remote remove origin - 리모트 잘못 설정하다 알게됨)

 

2. create-react-app context-anti-redux

필요없는거 다 지우기

App.css

App.test.js

index.css

logo.svg

serviceWorker.js

setupTests.js

 

이 파일 관련 코드도 다 지우기!

 

3. yarn start

 

4. 환경

React: 16.3 이상

 

5. 설치

yarn add styled-components styled-reset styled-flex-component

css 여기서 안함

 

6.

no props passed!

 

7. store.js 파일 생성

redux는 store, provider 생성해야지 children에게 데이터를 내려준다

 

(꿀팁) 8. root 폴더에

.env

NODE_PATH=src

이렇게 하면, src가 root가 된다.

 

9. 

App.js

import Card from "./Card";
import React from "react";
import Store from "./store";

function App() {
  return (
    <Store.Provider>
      <div className="App">
        <h1>Count</h1>
        <h4>num</h4> 
        <br />
        <Card />
        <Card />
      </div>
    </Store.Provider>
  );
}

export default App;

provider로 감싸준다.

 

store.js

import React from "react";
const Store = React.createContext(null);

export default Store;

 

10. prop을 사용하지 않고 어떻게 value를 불러와서 사용하는지가 정말 중요해!

consumer한테 함수가 아닌 다른 child를 사용하면 안되고, 하고싶다고 할 수도 없어!

다른 child ex) <span></span>

consumer는 함수를 필요로 하는데, 함수 안에 이제 이 consumer가 store를 우리한테 줄거야

 

App.js

import React, { useEffect, useState } from "react";

import Card from "./Card";
import Notification from "./Notification";
import Store from "./store";

function App() {
  const [msg, setMsg] = useState("Hello");

  useEffect(() => {
    setTimeout(() => setMsg(""), 1000);
  }, []);
  return (
    <Store.Provider value={{ msg }}>
      <div className="App">
        <Notification />
        <br />
        <Card />
        <Card />
      </div>
    </Store.Provider>
  );
}

export default App;

value로 넘겨주면 끝

근데 이게 class component면 this.state를 넘기면 되는데, functional component라 그냥 {{ msg }} 이렇게 한땀한땀 넣어주는 수 밖에 없나?

 

Notification.js

import React from "react";
import Store from "./store";

function Notification() {
  return (
    <div>
      <h1>{`Count`}</h1>
      <h3>
        <Store.Consumer>{store => store.msg}</Store.Consumer>
      </h3>
    </div>
  );
}

export default Notification;

 

단지 Store.Consumer 하고 그 안에 store=> 만 해주면 가능

 

11. 함수 전달해보기

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

근데 나는 hook인데? 한번해보자.

 

App.js

import React, { useEffect, useState } from "react";

import Card from "./Card";
import Notification from "./Notification";
import Store from "./store";

function App() {
  const [msg, setMsg] = useState("Hello");
  const changeMsg = () => {
    if (msg === "Hello") {
      setMsg("Bye");
    } else {
      setMsg("Hello");
    }
  };

  // useEffect(() => {
  //   setTimeout(() => setMsg(""), 1000);
  // }, []);
  return (
    <Store.Provider value={{ msg, changeMsg }}>
      <div className="App">
        <Notification />
        <br />
        <Card />
        <Card />
      </div>
    </Store.Provider>
  );
}

export default App;

changeMsg 를 provider에 전달!

import React from "react";
import Store from "./store";

function Card() {
  return (
    <div>
      <h1>title</h1>
      <Store.Consumer>
        {store => <button onClick={store.changeMsg}>check</button>}
      </Store.Consumer>
      <button onClick={() => {}}>delete</button>
    </div>
  );
}

export default Card;

onClick에 그대로 사용! super super super super coooooool

 

 

 

완성된 코드는 깃헙에서.

https://github.com/daheeahn/context-anti-redux

daheeahn/context-anti-redux

 

 

---

 

React Suspense

Suspense API

API fetch 할 필요가 있다면 Component는 데이터 로딩될 때까지 렌더링 되지 않음. fucking cool 이래

 

https://auth0.com/blog/time-slice-suspense-react16/

Beyond React 16: Time Slicing and Suspense API