React/ 실습 - 리액트 고급기술(컨텍스트, 리덕스)

React 실습당시 무조건 vscode내 터미널에서 조건을 실행한다!

projcon 파일

1. 파일 생성
2. src 파일 하단에 components 파일 생성
3. js 파일 생성 (button, message, title)
4. 코드 작성후 실행결과 확인

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;

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;

Message.js

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

class Message extends Component{
    static contextType = LangContext;
    render(){
        const {lang} = this.props;
        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;

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;

결과물

느낀점

파일을 여러게 만들어서 진행하니 코드를 간결하게 쓰고 볼수있어서 좋은듯 하다.
필요에 따라 어떤 코드나 장치를 사용할지는 모르지만 google이 도와줄 듯 하다.