✅ Context

☑️ Context 환경 마련하기

npx create-react-app projcontx cmd에 명령어 기입으로 프로젝트 생성

😊 일반적인 컴포넌트 이용하여 실행 결과물

App.js

import React, { Component } from 'react';
import Button from "./component/Button";
import Title from "./component/Title";
import Message from "./component/Message";


class App extends Component {
  state = {lang: "en"};

  toggleLang = () =>{
    this.setState(({lang}) => ({
      lang: lang === "en"? "kr" : "en"
    }));
  }
  render() {
    const {lang} = this.state;
    return (
      <Fragment>
         <Button lang={lang} toggleLang={this.toggleLang} />
         <Title lang={lang} />
         <Message lang={lang} />
      </Fragment>
    );
  }
}

export default App;

Title.jsx

import React from "react";

 function Title({lang}) {
     const text = lang === "en"? "컨텍스트" : "Context";
     return <h1>{text}</h1>;
 }

export default Title;

Button.jsx

import React from "react";

function Button({toggleLang}){
  return <button onClick={toggleLang}>{lang}</button>;
}

export default Button;

Message.jsx

import React, {Component} from "react";

class Message extends Component{
  render(){
    const {lang} = this.props;
    if(lang === "en")
      return(
        <p>
          "컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에 걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."
        </p>
      );
    else
      return(
        <p>
          "Context provides a way to pass data through the component tree without having to pass props down manually at every level"
        </p>
      )
  }
}

export default Message;

😊 Context 기능을 활용하면?

App.js

import React, { Component } from 'react';
import Button from "./component/Button";
import Title from "./component/Title";
import Message from "./component/Message";
import LangContext from './LangContext';


class App extends Component {
  state = {lang: "en"};

  toggleLang = () =>{
    this.setState(({lang}) => ({
      lang: lang === "en"? "kr" : "en"
    }));
  }
  render() {
    const {lang} = this.state;
    return (
      <LangContext.Provider value={lang}>
        <Button toggleLang={this.toggleLang} />
        <Title/>
        <Message lang={lang} />
      </LangContext.Provider>
    );
  }
}

export default App;

LangContext.js

import {createContext} from "react";

const LangContext = createContext("en");

export default LangContext;

Title.jsx

import React from "react";
import LangContext from "../LangContext";

function Title() {
  return (
    <LangContext.Consumer>
        {lang => {
          const text = lang === "en" ? "Context" : "컨텍스트";
          return <h1>{text}</h1>;
        }}
    </LangContext.Consumer>
  );
}

export default Title;

Button.jsx

import React, {useContext} from "react";
import LangContext from "../LangContext"

function Button({toggleLang}){
  const lang = useContext(LangContext);
  return <button onClick={toggleLang}>{lang}</button>;
}

export default Button;

Message.jsx

import React, {Component} from "react";
import LangContext from "../LangContext"

class Message extends Component{
  static contextType = LangContext;
  render(){
    const lang = this.context;
    if(lang === "en")
      return(
        <p>
          "컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에 걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."
        </p>
      );
    else
      return(
        <p>
          "Context provides a way to pass data through the component tree without having to pass props down manually at every level"
        </p>
      )
  }
}

export default Message;

Context 종류가 consumer, usecontext ... 등이 있는데 사실 지금 당장 알고있어도 구분이 잘 안가서, 역시나! 따로 공부를 좀 해야할 듯 싶다 하하... 그래도 일단 Context라는 게 있다는 것을 알게 되는 계기가 되었다.

☑️ Components 활용 복습(?)

😊 예전 기법

App.js

import './App.css';
import React from 'react';

 class AddNumber extends Component {
   render(){
     return(
       <div>
         <h1>Add Number</h1>
         <input type="button" value="+"></input>
         <input type="text" value="0"></input>
       </div>
     );
   }
 }

 class AddNumberRoot extends Component {
   render(){
     return (
       <div>
         <h1>Add Number Root</h1>
         <AddNumber>

         </AddNumber>
       </div>
     );
   }   
 }

 class DisplayNumber extends Component{
   render(){
     return(
       <div>
         <h1>Display Number</h1>
         <input type="text" value="0" readOnly></input>
       </div>
     );
   }
 }

 class DisplayNumberRoot extends Component{
   render() {
     return (
       <div>
         <h1>Display Number Root</h1>
         <DisplayNumber>

         </DisplayNumber>
       </div>
     );
   }
 }

function App() {
  return (
    <div className='App'>
      <h1>Root</h1>
      <AddNumberRoot></AddNumberRoot>
      <DisplayNumberRoot></DisplayNumberRoot>
    </div>
  );
}

export default App;

div {
  border:5px solid #764abc;
  margin: 10px;
  color: #764abc;
  padding: 10px;
}

😊 컴포넌트 활용 기법

App.js

import './App.css';
import React from 'react';
import AddNumberRoot from './components/AddNumberRoot';
import DisplayNumberRoot from './components/DisplayNumberRoot';

function App() {
  return (
    <div className='App'>
      <h1>Root</h1>
      <AddNumberRoot></AddNumberRoot>
      <DisplayNumberRoot></DisplayNumberRoot>
    </div>
  );
}

export default App;

AddNumber.jsx

import React, {Component} from "react";

class AddNumber extends Component {
  render(){
    return(
      <div>
        <h1>Add Number</h1>
        <input type="button" value="+"></input>
        <input type="text" value="0"></input>
      </div>
    );
  }
}

export default AddNumber;

AddNumberRoot.jsx

import React, {Component} from "react";
import AddNumber from "./AddNumber";

class AddNumberRoot extends Component {
  render(){
    return (
      <div>
        <h1>Add Number Root</h1>
        <AddNumber>

        </AddNumber>
      </div>
    );
  }   
}

export default AddNumberRoot;

DisplayNumber.jsx

import React, {Component} from "react";

class DisplayNumber extends Component{
  render(){
    return(
      <div>
        <h1>Display Number</h1>
        <input type="text" value="0" readOnly></input>
      </div>
    );
  }
}

export default DisplayNumber;

DisplayNumberRoot.jsx

import React, {Component} from "react";
import DisplayNumber from "./DisplayNumber";

class DisplayNumberRoot extends Component{
  render() {
    return (
      <div>
        <h1>Display Number Root</h1>
        <DisplayNumber>
          
        </DisplayNumber>
      </div>
    );
  }
}

export default DisplayNumberRoot;

div {
  border:5px solid #764abc;
  margin: 10px;
  color: #764abc;
  padding: 10px;
}

일단 Context 기능이 있다는 것과, Component를 어떻게 활용하는지 다시 복습을 해서 좀 어느정도 익숙해진 것 같다. 하지만 아직 갈길이 멀다는 것을 깨닫고 독학을 해야할 듯 싶다... ㅠ