1. 학습한 내용

react 실습

• App.js
  -App이라는 컴포넌트 class 생성

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.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" : "컨텍스트"; //값이 en이면 A를 아니면 B넣어주라는 함수
                return <h1>{text}</h1>;
            }}
        </LangContext.Consumer> 
        // 컨텍스트를 넘겨주는 방법 중 하나 Consumer
    );
}

export default Title;

• state(현재상태)
  -React에서 state는 데이터를 보관하며, component는 사용자에게 보관된 데이터[data]를 렌더[render]할 것이다. 또한 액션[action] 및 이벤트[event]에 의하여 변경될 수 있다. (React에서는 컴포넌트의 state를 setState로 변경이 가능하다)
  -컴포넌트에서 관리하는 상태값이 적거나 단순한 숫자나 문자열 같은 경우엔 useState를 사용
  -관리하는 값이 많고 어떠한 값을 받아 새로운 상태로 갱신 해야한다면 useReducer를 사용

• Context: 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리
  -컴포넌트에게 props를 전달해줘야 하는 상황에서 코드의 구조가 훨씬 깔끔해짐
  -useContext(createcontext로 생성한 객체)

react 실습2

-+버튼을 누르면 숫자가 오르고 카운트가 된다

• App.js

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

//이전의 개발 방법 => 한 곳에 각 클래스를 만들어준다
// 지금은 컴포넌트에 각 클래스를 만들어 준다

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

export default App;

• AddNumber.js

import React, {Component} from "react";

//AddNumber Component Class를 만들자
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.js

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

//AddNumberRoot Component Class를 만들자
class AddNumberRoot extends Component{
    render(){
      return(
        <div>
          <h1>Add Number Root</h1>
          <AddNumber></AddNumber>
        </div>
      );
    }
  }

export default AddNumberRoot;

• DisplayNumber.js

import React, {Component} from "react";

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

export default DisplayNumber;

• DisplayNumberRoot.js

import React, {Component} from "react";
import DisplayNumber from "./DisplayNumber";
//DisplayNumberRoot Component Class를 만들자
class DisplayNumberRoot extends Component{
    render(){
      return(
        <div>
          <h1>Display Number Root</h1>
          <DisplayNumber></DisplayNumber>
        </div>
      );
    }
  }

export default DisplayNumberRoot;

2.학습한 내용 중 어려웠던 점

확실히 환경 구축 이 후에는 실습하기가 훨씬 편한 것 같다. 단지 에러가 많이 생기기때문에 에러를 잡아낸다고 시간이 좀 걸린다. 따라하기 실습이기 때문에 아직은 쉽게 하고있지만 만약 혼자서 한다면 에러를 잡아내기가 쉽지 않을 것 같다.

3.해결방법

아직 리액트의 각 요소들을 모르는 부분이 많아서 찾아보면서 해야한다. 하나씩 자세히 알아갈 필요가 있다.

4. 학습소감

이전에 배웠던 것들이 리액트에서 어떻게 사용될 수 있는지 좀 더 알고싶은 부분이 크다. 하지만 아직은 리액트의 요소들도 모르게는게 많아서 그 부분에 좀 더 집중할 필요가 있는 것 같다. 월말평가에서 jQuery Dom요소 부분이 좀 헷갈리는게 있어서 좀 더 살펴볼 필요도 있을 것 같다.