Component 파일로 분리
Controller / model 분리라고 생각하면 이해가 쉬울 것 같다. model을 따로 빼주는 것.
src > components 폴더를 생성한다.
원래 App.js 에 있던 Subject class를 Components > Subject.js 안으로 옮겨놨다. Subject class는 Component를 상속받으므로
import React, { Component } from 'react'
React Component의 import가 필요하다.
또한 App.js 안에서 Subject class를 사용해야 하므로 export를 해준다.
export default
App.js 에서는 Subject가 필요하므로 import를 해준다.
import Subject from "./components/Subject"
state
Props가 Component 외부에서 Component를 조작하는 방식이라면, 내부에서 조작하는 방식은 State
어떤 Component가 실행될 때 render() 보다 먼저 실행이 되면서, 해당 Component를 초기화해주는 code는 Constructor 안에다 작성한다.
Constructor = 생성자 라고 생각하면 될 것 같다.
상위 Component인 App의 state 값을 하위 Component의 Props 값으로 전달했다.
Props & State & key
App.js
App의 state에 contents라는 배열을 선언하고, TOC의 props에 data라는 이름으로 이 state값을 전달한다.
TOC.js
값을 전달받은 props의 값 =
this.props.data
이 때, 그대로 react가 실행되면 프로그램 자체는 정상적으로 실행되지만 console창에 아래와 같은 error가 출력된다.
각각의 리스트의 항목들은 key라고 하는 props를 갖고 있어야 한다.
위와 같이 key값을 입력해주면 error가 사라진다. 이러한 key값은 react가 필요에 의해 개발자에 요청하는 형태이다.
