[6/28 일반] React/ 실습 - 리액트 고급기술(컨텍스트, 리덕스)

1. 학습한 내용
   1) 필기 내용

props : 데이터를 주고 받을 때 매개변수를 사용함 but 데이터가 많을 때는 설정하는 것이 힘듦
→ 컨텍스트 : 전역적으로 관리할 때 좋음 / 좀 더 단순하고 체계적인 방식으로 접근 가능

컨텍스트(consumer / useContext / contextType로 접근)
consumer는 render함수에서 받음

== : 왼쪽과 오른쪽이 같냐?
=== : 완전히 일치?

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

termanial에서 projcon 프로젝트 만들기
→ npx create-react-app projcon
projcon/src/component/Button.js

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;

projcon/src/component/Message.js

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>
                    "Context provides a way to pass data through the component tree
                    without having to pass props down manually at every level"
                </p>
            );
        else
            return(
                <p>
                    "컨텍스트는 모든 레벨에서 일일이 props를 넘기지 않고도 컴포넌트 트리에
                    걸쳐서 데이터를 전달할 수 있는 방법을 제공합니다."
                </p>

            );
    }
}

export default Message;

projcon/src/component/Title.js

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;

projcon/src/App.js

import React, { Component} from 'react';
import Button from "./components/Button";
import Title from "./components/Title";
import Message from "./components/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 />
      </LangContext.Provider>
    );
  }
}

export default App;

→ const text = lang === "en"? "Context" : "컨텍스트“
는 language가 영어면 Context를 넣어주시고, 아니면 컨텍스트로 해주세요~

projcon/src/component/LangContext.js

import {createContext } from 'react';

const LangContext = createContext("en");


export default LangContext;

→ 결과(아래 그림)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

npx create-react-app projcom 만듦

projcom/src/components/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;

projcom/src/components/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;

projcom/src/components/DislayNumber.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;

projcom/src/components/DislayNumberRoot.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;

projcom/src/App.css

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

→ 결과(아래 그림)

2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들
   1) 오늘은 크게 어려운 것은 없었고, 대체로 잘 따라감

3. 해결방법 작성
   1) 화이팅 하자? 나 자신아

4. 학습 소감
   1) 오늘은 진도가 급하지 않았고, 느슨한 분위기였으므로, 좀 더 집중할 수 있었다?
   2) 좀 더 힘내봅시다 나 자신ㅎ