6/28 개발일지

1)학습한 내용

컨텍스트와 리덕스

실습 : 버튼을 사용해 한글이면 영어로 영어면 한글로 바꾸는 코드
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;

LangContext.js

import {createContext} from "react";

const LangContext = createContext("en");

export default LangContext;

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;

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;

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 './components/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;

실행 결과 :

실습2
AddNumber.jsx

import React, {Component} from "react";

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

export default DisplayNumber;

DisplayNumberRoot.jsx

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

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

export default DisplayNumberRoot;

App.js

import React, { Component } from 'react';
import './App.css';
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;

App.css

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

실행 결과

2) 학습내용 중 어려웠던 점

X

3) 해결방법

X

4) 학습소감

기능을 정말 하나하나 나누어 구현한다는 점이 귀찮게 느껴졌지만 그만큼 개별적으로 작성되는 만큼 수정이 용이 할 것이고 팀원들과 함께 할 경우 더욱 좋을 것이라 느껴졌습니다.