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>
      </div>
    );
  }
}

export default DisplayNumber;

'./components/DisplayNumber.jsx'

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

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

export default DisplayNumberRoot;

'./components/DisplayNumberRoot.jsx'

//import logo from './logo.svg';
import './App.css';
import React, {Component} from 'react';
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) 학습내용 중 어려웠던 점

리액트를 배우면서 가장 어려웠던 것은 똑같이 작성을 했었는데 철자 한 군데 틀렸거나 아니면 띄어쓰기를 잘못해서 오류가 나는 경우가 종종 있었다. 심지어, CMD에서 실행하는 것과 비주얼 스튜디오 코드에서 실행하는 것인데 오류가 발생하는 여부가 달라지는 경우가 있다.

3) 해결방법

나는 오류가 발생했을 때, 오타가 없다는 것을 알았을 때, 이번에는 띄어쓰기를 했었다. 방법은 강사가 작성한 코드를 보면서 띄어쓰기 부분을 살펴보았다. 주로 {} 안에 있는 Components 부분을 위주로 띄어쓰기를 고쳤다. 그렇게 고쳤더니, 이번에는 오류 화면이 잘 나오질 않았다.

4) 학습소감

나는 이전에 리액트를 독학한 적이 있었기에 이번 수업에는 내가 몰랐던 것들을 다시 한 번 알게 되었던 리액트가 띄어쓰기에도 영향을 준다는 것을 알게 되었다. 시간이 나는대로 리액트 관련 문서나 자료를 다시 봐야 할 필요가 있다.