React14일차-ContextAPI

저번게시물에서 했던거 열어서 npm start 해보자 오늘은 아주조금 미세하게 어려울수있다. 파일이름을 봐주세요 ㅎㅎ

우선 component폴더 안데CA.js만들어주세요

import { createContext } from "react";

const Ca = createContext();

export default Ca;

이거 작성

이건 Ca에 CreateContext라는 기능을 저장 하고 밖으로 보내기 라는 내용이다.

index.js안에 

import React from "react";

import ReactDOM from "react-dom";

import "./index.css";

import App from "./App";

import reportWebVitals from "./reportWebVitals";

import Ca from "./component/Ca";

const person = [

  { name: "mark", age: 45 },

  { name: "mark1", age: 45 },

  { name: "mark2", age: 45 },

];

ReactDOM.render(

  <React.StrictMode>

    <Ca.Provider value={person}>

      <App />

    </Ca.Provider>

  </React.StrictMode>,

  document.getElementById("root")

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

이렇게 변경

이거는 기존에 서 Ca.Provider 즉 createContext에서 제공하는 역할을 하겠다는것이다 즉 Ca.provider 안에 있는 요소에만 제공하겠다 라는 의미이다 무엇을 제공할것이니지는 value={}이렇게 해서 적어주면 된다.

즉 person에 name,age가있는 객체 배열을  저장했으므로 person이라는 배열이 전달된다.

이제 component에 Example.jsx를 생성하고

import Ca from "./Ca";

export default function Example() {

  return (

    <Ca.Consumer>

      {(value) => (

        <ui>

         

          {value.map((person) => (

            <li>{person.name}</li>

          ))}

        </ui>

      )}

    </Ca.Consumer>

  );

}

작성

여기서 Ca.consumer는 Provider에서 제공받은 것을 쓰겠다는 의미이다. 

(전달받은데이터저장할 변수이름)=>{어떻게 처리할지}이렇게  되므로

ui태그안에서 value라는 변수에 받고 value의 데이터를 한개씩 돌면서 person에 저장하고 그 person.name을 꺼내서 li태그에 넣겠다 라는 의미이다

App.js를 

import logo from "./logo.svg";

import "./App.css";

import A from "./component/A";

import Example from "./component/Example";

function App() {

  return (

    <div className="App">

      <header className="App-header">

        <img src={logo} className="App-logo" alt="logo" />

        <A />

        <Example />

      </header>

    </div>

  );

}

export default App;

이렇게 변경  하고 npm start창을 보면

이렇게 잘나왔는걸 알수있습니다.

또 Example.jsx 안에 내용을 

import Ca from "./Ca";

import React from "react";

export default class Example extends React.Component {

  static contextType = Ca;

  render() {

    const value = this.context;

    return (

      <ul>

        {value.map((person) => (

          <li>{person.name}</li>

        ))}

      </ul>

    );

  }

}

 이렇게 변경해주겠습니다.

여기서 중요한것은

static contextType = Ca;  static 과 contextType라는 이름이 고정입니다.

그래야지 const value = this.context; 여기서 this.context로 Ca를 가져올수있습니다.

즉 Ca로 제공하는 데이터를 contextType 에 저장하고 그걸 value에 저장해서 쓰겠다는 의미입니다.

npm start로 보면 이렇게 잘뜹니다.

Example.jsx를 

import Ca from "./Ca";

import React from "react";

export default class Example extends React.Component {

  //static contextType = Ca;

  render() {

    const value = this.context;

    return (

      <ul>

        {value.map((person) => (

          <li>{person.name}</li>

        ))}

      </ul>

    );

  }

}

Example.contextType = Ca;

 이런식으로 고치면 여러개의conetxtType을 전달해줄수 있습니다.

또 Example.jsx를 

import Ca from "./Ca";

import React, { useContext } from "react";

export default function Example() {

  const value = useContext(Ca);

  return (

    <ul>

      {value.map((person) => (

        <li>{person.name}</li>

      ))}

    </ul>

  );

}

이런식으로 고쳐봅시다

그렇다면 이걸 보시죠 이거는 이때까지중에 젤 단순해서 많이쓰입니다.

useContext라는 Hook으로 코드를 줄여줘서 사용하기 쉽습니다.

useContext로 this.context 랑 contextType 이걸를 대신하기 때문에 쉽고 빠르게 할수잇습니다.

npm start 로 보면 이렇게 잘나옵니다.

이렇게  복잡한것도 hook으로 간단하게 할수있으니 hook의 유용성을 느낄수 있엇습니다. ㅎㅎ

훅 만세 훅훅 잽잽 훅훅ㅋㅋㅋㅋ

개드립 죄송합니다 ㅋㅋㅋ