props

key

react 내부적으로 요청하는 값이므로 그냥 그러려니 하고 넣어주는게 좋다

• 반복적인 태그를 집어넣을때, 필요한 값!!!

import React, { Component } from 'react';
/*eslint-disable */

import '../CSS/Subject.css';
import core_logo from '../CSS/Core.svg'


class Logo_Room extends Component {
    render() {
        return (
            <div style={{ textAlign: "center" }}>
                <img src={core_logo} style={{ width: 100, height: 100 }} ></img>
                <p>{this.props.class_room}</p>
            </div>
        );
    }
}
class Subject_Span extends Component {
    render() {
        return (
            <div>
                <span className="subject_text"> {this.props.title}</span>
            </div>
        );
    }
}
class Subject extends Component {

    render() {
        let span_list = [];
        let data = this.props.data;

        for (let index = 0; index < data.length; index++) {
            span_list.push(<Subject_Span key={data[index].id} title={data[index].title}></Subject_Span>)
        }
        return (
            <div className="subject">
                <Logo_Room class_room="C프로그래밍 및 실습" />
                {span_list}
            </div>
        );
    }
}

export default Subject;

render()

react에서는 state, props의 값이 바뀌면 해당되는 component의 render함수가 호출되도록 된다 -> 화면이 다시 그려진다.

/*eslint-disable */
import './App.css';
import React, { Component } from 'react';

import Toolbar from './components/Toolbar';
import Subject from './components/Subject'



class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode: 'teacher',
      teacher_top: { feed: 'WorkBank' },
      student_top: { feed: 'FeedBank' },

      teacher_subject: [
        { id: 1, title: 'Student' },
        { id: 2, title: 'WorkBook' },
        { id: 3, title: 'FeedBack' }
      ],

      student_subject: [
        { id: 1, title: 'WorkBook' }
      ],
    }
  }
  //state데이터, state데이터 변경 함수 
  render() {

    let _feed = null;
    let _subject = [];
    if (this.state.mode == 'teacher') {
      _feed = this.state.teacher_top.feed;
      _subject = this.state.teacher_subject;
    }
    else {
      _feed = this.state.student_top.feed;
      _subject = this.state.student_subject;
    }

    return (
      <div className="App">

        <Toolbar feed={_feed} />
        <Subject data={_subject} />

      </div>

    );
  }


}


export default App;

props & state

전달받은 props를 해당 컴포넌트에서 자체적으로 수정하는 건 불가능 !
왜? 그 컴포넌트의 속성이기 때문에!
관리는 state로 하고
둘다 render() 함수를 호출하기 때문에 ui를 수정할때 사용!

상위, 하위

하위컴포넌트로 값 전달 -> props
상위컴포넌트 값 전달 -> event 구현