React 실습

1)학습한내용
컨덱스트
어떤 컴포넌트 트리 내에서 최상위의 컴포넌트부터 최말단 컴포넌트에 걸쳐 전역으로 관리해야 할 데이터가 필요하다.

리액트 콘테스트는 전역 데이터를 좀더 단순하지만 체계적으로 접근할수 있도록 도와준다.
컨슈머로 콘텍스트 접근
콘텍스트 타입으로 콘텍스트 접근 코드를 입력해보면

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;

'./components/AddNumber.jsx'

'./components/AddNumber.jsx'
import React, { Component }from"react";
import AddNumber from "../components/AddNumber";
class AddNumberRoot extends Component {
render() {
 return (
 <div>
   <h1>Add Number</h1>
   <Addnumber></AddNumber>
   </div>
     );
    }
   }
   export default AddNumberRoot;
  
   
   
'./components/AddNumberRoot.jsx'

import React, {Component} from "react";
class DisplayNumber extends Component {
render () {
return (
<div>
  <h1>Display Number</h1>
  <input type="text" value="0" readOnly></input>
  
  DisplayNumber; 
  
  
'./components/DisplayNumber.jsx'
import React, {Component} from "react";
import DisplayaNumber from "..//components/DisplayNumber";

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

'./components/DisplayNumberRoot.jsx'

//import logo from './logo.svg';
  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.js' 
  ```  
  
  
  
  
  
  2)학습한 내용 중 어려웠던점 
  코드를 입력하고 오류가 발생 했을때 오타가 있어서 오류화면이 떳는데 띄어쓰기를 잘못해서 오류화면이 나타난 경우도 있었다.
  
  3)해결방법
  띄어쓰기를 해보았다.
  
  4)학습소감
  리액트라는 게 내가 입력한 코드를 작성해서 결과물을 보는 것인데 새로운 것을 배워 흥미롭기도 하고 한편으론 어렵다는 생각을 했다.