이벤트 state props, render()

state의 값이 바뀌면 그 state를 가지고 있는 컴포넌트의 render()가 다시 호출된다.

그 렌더함수가 다시 호출됨에 따라 그 랜더 하위에 있는 랜더함수들도 싹 호출이 된다. (화면 다시 그려짐)

state 기본값을 뜻함 props나 state의 값이 바뀌면 해당되는 render 함수가 호출되도록 약속되어 있음

import logo from "./logo.svg";
import React, { Component } from "react";
import "./App.css";
import TOC from "./components/TOC";
import Content from "./components/Content";
import Subject from "./components/Subject";
//하나의 컴포넌트는 하나의 태그로 감싸줘야한다.

class App extends Component {
  // 유사 자바스크립트이다. 자바스크립트는 아님.
  constructor(props) {
    super(props); // 얘네가 먼저 실행이된다. 초기화를 담당한다 바로 state다
    this.state = {
      mode: "welcome",
      subject: { title: "WEB", sub: "World Wide Web" },
      welcome: { title: "Welcome", desc: "Hello, React!!" },
      contents: [
        { id: 1, title: "HTML", desc: "HTML is for information" },
        { id: 2, title: "CSS", desc: "CSS is for design" },
        { id: 3, title: "JavaScript", desc: "JavaScript is for interactive" },
      ],
    };
  }

  render() {
    return (
      <div className="App">
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
        ></Subject>
        <Subject title="React" sub="For UI"></Subject>
        <TOC data={this.state.contents}></TOC>
        <Content
          title="HTML"
          desc="HTML is HYPERText Markup Language"
        ></Content>
      </div>
    );
  }
}

export default App;

event 주기

class App extends Component {
  // 유사 자바스크립트이다. 자바스크립트는 아님.
  constructor(props) {
    super(props); // 얘네가 먼저 실행이된다. 초기화를 담당한다 바로 state다
    this.state = {
      mode: "read",
      subject: { title: "WEB", sub: "World Wide Web" },
      welcome: { title: "Welcome", desc: "Hello, React!!" },
      contents: [
        { id: 1, title: "HTML", desc: "HTML is for information" },
        { id: 2, title: "CSS", desc: "CSS is for design" },
        { id: 3, title: "JavaScript", desc: "JavaScript is for interactive" },
      ],
    };
  }

  render() {
    console.log("App render");
    let _title,
      _desc = null;
    if (this.state.mode === "welcome") {
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    } else if (this.state.mode === "read") {
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }
    return (
      <div className="App">
        {/* <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
        ></Subject> */}
        <header>
          <h1>
            <a
              href="/"
              onClick={(e) => {
                console.log(e);   
                e.preventDefault(); // ! 이렇게 전체실행시키는거 막아줄 수도 있다.
                alert("hi"); //온클릭하면 하이라는 앨러트를 발생!
              }}
            >
              {this.state.subject.title}
            </a>
          </h1>
          {this.state.subject.sub}
        </header>

        <TOC data={this.state.contents}></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

export default App;

toggleswitch event

toggleswitch 로 이벤트를 줄 때 this.setState( state =>({
ison : !state.ison })) 이렇게 스테이트의 이즈온이 아닌걸로 바꿔 줄 수 있다

setState 는 반드시 위에서 this.handelClick = this.handelClick.bind(this) 이렇게 묶어줘야함

import "./styles.css";
import React from 'react'
import { render } from "react-dom";


export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <ToggleSwitch />
    </div>
  );
}

class ToggleSwitch extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ison : false };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    console.log('pushed')
    this.setState(state =>({
      ison : !state.ison
    }))
  }
  render() {
    return <h1> <button onClick={this.handleClick}>{this.state.ison ? 'ON' : 'OFF'}</button> </h1>
  }
}