흐아 리액트 넘나 어렵다..

예전에 유투브 보면서 정리를 했는데도 리액트의 전반적인?

걸 보려니까 넘나 어렵다.

소크라티브 풀다가

모르는게 있어서 남긴다.

React State and Props | Learn React For Beginners Part 4

https://www.youtube.com/watch?v=dMH1_YtUTSQ&t=21s

https://www.youtube.com/watch?v=dGcsHMXbSOA&list=PLDyQo7g0_nsVHmyZZpVJyFn5ojlboVEhE

리액트 강의 + 유튜브 클론코딩 외 실전 프로젝트

https://www.youtube.com/watch?v=bJLfBq9npwQ

import React, { Component } from "react";
import "./App.css";

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

class TOC extends Component {
  render() {
    return (
      <nav>
        <ul>
          <li>
            <a href="1.html">HTML</a>
          </li>
          <li>
            <a href="2.html">CSS</a>
          </li>
          <li>
            <a href="3.html">JavaScript</a>
          </li>
        </ul>
      </nav>
    );
  }
}

class Content extends Component {
  render() {
    return (
      <article>
        <h2>HTML</h2>
        HTML is HyperText Marup Language.
      </article>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

export default App;

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web"></Subject>
        <Subject title="React" sub="For UI"></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
    );
  }
}

이것을 통해서 아래로 갈 수록 형식이 중요해진다라는 것을 알게 되었다.

그리고 분리를 다해줬다.

  consturctor(props) {
    super(props);
  }

어떤 component가 실행될때 render라는 함수보다 먼저 실행이 되면서

그 component를 초기화 시켜주고 싶은 코드는

constructor를 저렇게 짜고 그 안에다가 코드를 작성한다.

함수가 제일 먼저 실행되면서 초기화를 담당한다.

  constructor(props) {
    super(props);
    this.state = {
      subject: { title: "WEB", sub: "World Wide Web!" },
    };
  }

  render() {
    return (
      <div className="App">
        <Subject
          title="this.state.subject.title"

이렇게 된다 그렇기 떄문에 {} 가 필요하다

주인공 state

constructor가 상위 값이다.

render 함수는 어떤 html을 그릴까 결정하는 함수이다.

react에서는 props나 state가 바뀌면 해당값에 대한 render함수가 호출이 된다.

이벤트를 넣어준다..

        <header>
          <h1>
            <a
              href="/"
              onClick={() => {
                alert("hi");
              }}
            >
              {this.state.subject.title}
            </a>
          </h1>
          {this.state.subject.sub}
        </header>

        <header>
          <h1>
            <a
              href="/"
              onClick={(e) => {
                console.log(e);
                e.preventDefault();
              }}
            >
              {this.state.subject.title}
            </a>
          </h1>
          {this.state.subject.sub}
        </header>

e.preventDefualt()는 페이지 전환을 막아준다.

        <header>
          <h1>
            <a
              href="/"
              onClick={function (e) {
                console.log(e);
                e.preventDefault();
                this.setState({
                  mode: "welcome",
                });
              }.bind(this)}
            >
              {this.state.subject.title}
            </a>
          </h1>
          {this.state.subject.sub}
        </header>

이거를 기출변형으로 하면

        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function () {
            alert("hi");
          }}
        ></Subject>

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>
          <a
            href="/"
            onClick={function (e) {
              e.preventDefault();
              this.props.onChangePage();
            }.bind(this)}
          >

위에를 기출변형으로 하면

        <Subject
         title={this.state.subject.title}
         sub={this.state.subject.sub}
         onChangePage={function () {
           this.setState({ mode: "welcome" });
         }.bind(this)}
       ></Subject>

컴포넌트 이벤트 만들기를 하고 있는데 넘 어렵다..

        <TOC
          onChangePage={function () {
            this.setState({ mode: "read" });
          }.bind(this)}
          data={this.state.contents}
        ></TOC>

TOC에서 한번 onChangePage를 만들어 주고

TOC 하위에서

          <a
            href={"/content/" + data[i].id}
            onClick={function (e) {
              e.preventDefault();
              this.props.onChangePage();
            }.bind(this)}
          >

하위에서 이거를 인자로 받아와서 클릭을 하면 어떻게 하겠다라는건데 좀 어렵다.