[React] React 예제 200 - 76~77

http://www.yes24.com/Product/Goods/97126219

 

노마드 코더 강의와 더불어 해당 책을 공부하고 있다. 

초보자를 위한 리액트 200제 (React) - YES24

 

예제 76번부턴 이해가 잘 안 됨 + 처음 보는 애들이라 블로그에 정리하면서 예제를 직접 따라하는 게 더 좋을 것 같다. 해당 책은 클래스 기반 컴포넌트로 돼 있어서... 클래스 기반 컴포넌트 문법을 이 참에 공부하자는 마음가짐으로 하나씩 따라했다... 

 

 

 

 

---

 

 

 

76. 컨텍스트 API 사용하기

 

 

 

?

 

부모 컴포넌트가 손자 컴포넌트에게 데이터를 전달하고 싶으면 자식을 통해 전달해줘야 한다.

그럼 자식은 필요도 없는 데이터를 위해 불필요한 코드를 작성해야한다.

 

 

!

 

컨텍스트

 

컨텍스트는 데이터 공급자와 소비자를 정의하고 데이터가 필요한 컴포넌트만 사용할 수 있게 구현할 수 있다. 

하위 컴포넌트가 여러 개인 구조에서 유용하게 사용할 수 있다.

몇 번째 하위 컴포넌트인지와는 상관없이 필요한 하위 컴포넌트에서 소비자를 임포트해 데이터를 사용할 수 있게 한다. 

 

 

 

 

App.js

import React from "react";
import ContextAPI from "./R76_ContextAPI";

function App() {
  return (
    <div className="App">
      <h1>Context API 사용하기</h1>
      <ContextAPI />
    </div>
  );
}

export default App;

ContextAPI 컴포넌트를 포함시켜준다. 

 

 

 

<ContextAPI> 컴포넌트 

import React, { Children } from "react";
import Children from "./R76_Children1";
// import시  {Children} 으로 적었더니 오류가 났다. 메소드로 export한 게 없어서 그런듯...

const {Provider, Consumer} = React.createContext();
export {Consumer} // 하위 컴포넌트가 사용할 수 있도록 export시켜준다


class R76_ContextAPI extends React.Component {
  render() {
    return (
      <Provider value="React200">
        <Children />
      </Provider>
    )
  }
}

export default R76_ContextAPI

 

const {Provider, Consumer} = React.createContext();
export {Consumer} // 하위 컴포넌트가 사용할 수 있도록 export시켜준다

리액트 기본 제공 함수인 createContext를 호출하고 공급자와 소비자를 받아 사용할 수 있도록 한다.

하위 컴포넌트에서 소비자를 사용할 수 있도록 export 시켜준다.

 

자식 컴포넌트를 <Provider> 태그로 감싸고 전달할 데이터를 value값으로 할당한다.

 

 

 

 

자식 컴포넌트 <Children />

 

import React from "react";
import Children2 from "./R76_Children2";

class contextChildren extends React.Component {
  render() {
    return (
      <Children2 />
    )
  }
}

export default contextChildren

손자 컴포넌트인 <Children2 />를 return한다.

손자 컴포넌트에서 사용할 데이터를 전달하지 않아도 된다.

 

 

 

 

손자 컴포넌트  <Children2 />

import React from "react";
import { Consumer } from "./R76_ContextAPI";

class contextChildren2 extends React.Component {
  render() {
    return (
      <Consumer>
        {contextValue=> <h3>{`contextValue : ${contextValue}`}</h3>}
      </Consumer>
    )
  }
}

export default contextChildren2

부모 컴포넌트의 데이터를 사용하기 위해 부모 컴포넌트에서 export시켰던 consumer를 임포트 한다.

 

출력할 element를 Consumer태그로 감싸고 부모 컴포넌트에서 value에 할당했던 값을 변수로 받아 출력한다.

 

 

 

잘 출력되는 걸 볼 수 있다. 

 

 

 

 

 

 

 

 

 

 

 

77. 컨텍스트로 부모 데이터 변경하기

 

 

?

Props는 부모에서 자식 컴포넌트로 단방향 데이터 전송만 가능하다.

 

 

 

!

컨텍스트를 사용하면 자식 컴포넌트에서 부모 컴포넌트의 데이터를 변경할 수 있게 된다.

 

 

 

 

 

App.js

import React from "react";
import ContextAPI from "./R77_ContextAPI";

function App() {
  return (
    <div className="App">
      <h1>Context API 사용하기</h1>
      <h2>부모 데이터 변경하기</h2>
      <ContextAPI />
    </div>
  );
}

export default App;

 

 

 

<ContextAPI /> 컴포넌트 (부모 컴포넌트)

import React from "react";
import Children from "./R77_Children";

const {Provider, Consumer} = React.createContext()
export {Consumer}


class R77_ContextAPI extends React.Component {
  constructor (props) {
    super(props);
    this.setStateFunc = this.setStateFunc.bind(this);
  }

  setStateFunc(value) {
    this.setState({name : value});
    // state 변수에 name 파라미터 값을 할당하는 역할을 한다
  }

  render() {
    const content ={
      ...this.state,
      setStateFunc: this.setStateFunc
    }
    //content변수  => state값과 state변경함수를 담아 하위 컴포넌트에 전달한다.

    return(
      <Provider value={content}>
        <Children />
      </Provider>
    )
  }
}

export default R77_ContextAPI

 

 

 

<Children /> 컴포넌트 (자식 컴포넌트)

import React from "react";
import { Consumer } from "./R77_ContextAPI";

class contextChildren extends React.Component {
  render() {
    return (
      <Consumer>
        {contextValue => 
          <button onClick={(e) => contextValue.setStateFunc('자식 컴포넌트가 변경한 데이터')}>
            {contextValue.name}의 버튼!
          </button>
        }
      </Consumer>
    )
  }
}

export default contextChildren

 

<Consumer>안의 contextValue를 arrowFunction으로 썼더니 안 먹는다.... 

        {(contextValue) =>{
          <button onClick={(e) => {contextValue.setStateFunc("자식 컴포넌트가 변경한 데이터")}}>
            {contextValue.name}의 버튼!!
          </button>
        }} //error뜨는 코드!!

그래서 그냥... 예제대로 작성해주었고

 

 

초기 state값은 할당되지 않은 상태이므로 '~의 버튼!'만 뜬다.

 

 

 

 

 

button을 클릭하면 

 

 

 

 

contextValue의 파라미터인 setStateFunc에 값을 할당한다.

setStateFunc은 setState 메소드를 사용해 name 프로퍼티에 value값을 할당하여 state를 변경한다.

현재 value값은 "자식 컴포넌트가 변경한 데이터"다.

 

state변경이 일어났으므로 재렌더링이 발생하고 새로운 state값으로 button안의 값이 변경된다.