저번에 했는데도 어렵다...

rendering이 안된다...

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

import React, { Component } from "react";

/**
Chanllenge :

Given a stateless functional component

1. Follow the steps necessary to add state to it,
 // class-based component
 // conturctor method

2. Have state keep track of whether the user is logged in or not
 // isLoggedIn: Boolean (true or false)

3. Add a button that logs the user in/out
 // event listener (onClick)
 a. extra challenge - make the button display "log in" 
 if they're not logged in and "log out" if they are 
    // Conditional Rendering
  Display text that says "Logged in" if the user if logged in, or "Logged out" if they're not
  // Conditional Rendering
 */

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoggedIn: false,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState((prevState) => {
      return {
        isLoggedIn: !prevState.isLoggedIn,
      };
    });
  }

  render() {
    let buttonText = this.state.isLoggedIn ? "LOG OUT" : "LOG IN";
    let displayText = this.state.isLoggedIn ? "Logged in" : "Logged out";
    return (
      <div>
        <button onClick={this.handleClick}>{buttonText}</button>
        <h1>{displayText}</h1>
      </div>
    );
  }
}

export default App;

FETCH

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-promise-27fc71e77261

• Let's make it so our checkbox can actually mark our todo as complete or incomplete!
• This challenge is a little more involved than some of the past ones. Check the comments in the code for some help on accomplishing this one
• Challenge:
• 1. Create an event handler in the App component for when the checkbox is clicked (which is an onChange event)
• a. This method will be the trickest part. Check the comments in the stubbed-out method below for some pseudocode to help guide you through this part
• 2. Pass the method down to the TodoItem component
• 3. In the TodoItem component, make it so when the onChange event happens, it calls the handleChange method and passes the id of the todo into the function

import React, { Component } from "react";

// https://swapi.co /(old)
// https: //swapi.dev/

class App extends Component {
  constructor() {
    super();
    this.state = {
      character: {},
    };
  }

  componentDidMount() {
    this.setState({ loading: true });
    fetch("https://swapi.dev/api/people/1")
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          loading: false,
          character: data,
        });
      });
  }

  render() {
    const text = this.state.loading ? "loading..." : this.state.character.name;
    return <div>{text}</div>;
  }
}

export default App;

React Forms Part 1

https://reactjs.org/docs/forms.html

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      firstName: "",
      lastName: "",
      isFreindly: true,
      gender: "",
      favColor: "blue",
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const { name, value, type, checked } = event.target;
    type === "checkbox"
      ? this.setState({ [name]: checked })
      : this.setState({ [name]: value });
  }

  render() {
    return (
      <form>
        <input
          type="text"
          value={this.state.firstName}
          name="firstName"
          placeholder="First Name"
          onChange={this.handleChange}
        />
        <br />
        <input
          type="text"
          value={this.state.lastName}
          name="lastName"
          placeholder="Last Name"
          onChange={this.handleChange}
        />
        {/**
         * Other useful form elements:
         *
         *  <textarea /> element
         *  <input type="checkbox" />
         *  <input type="radio" />
         *  <select> and <option> elements
         */}
        <br />
        <textarea value={"Some default value"} />
        <br />

        <label>
          <input
            type="checkbox"
            name="isFriendly"
            chekced={this.state.isFreindly}
            onChange={this.handleChange}
          />
          Is friendly?
        </label>
        <br />
        <label>
          <input
            type="radio"
            name="gender"
            value="male"
            chekced={this.state.gender === "male"}
            onChange={this.handleChange}
          />
          Male
        </label>

        <br />
        <label>
          <input
            type="radio"
            name="gender"
            value="female"
            chekced={this.state.gender === "female"}
            onChange={this.handleChange}
          />
          Female
        </label>
        <br />

        <label>Favorite Color:</label>
        <select
          value={this.state.favColor}
          onChange={this.handleChange}
          name="favColor"
        >
          <option value="blue">Blue</option>
          <option value="green">Green</option>
          <option value="red">Red</option>
          <option value="orange">Orange</option>
          <option value="yellow">Yellow</option>
        </select>

        <h1>
          {this.state.firstName} {this.state.lastName}
        </h1>
        <h2>You are a {this.state.gender}</h2>
        <h2>Your favorite color is {this.state.favColor}</h2>
        <button>Submit</button>
      </form>
    );
  }
}

export default App;

WILL DO LIST

'Axios'를 공부한다.