2021년 4월 3일 복기

React를 하고 있는데

참조를 해보기를 바란다.
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

https://scrimba.com/learn/learnreact/react-conditional-render-c4kJNSL

이게 meme creator 인데 너무 어렵다.

import React, { Component } from "react";

/**
 *
 * Initialize state to save the following data:
 *  top text
 *  bottom text
 *  random image (intialize with "http://i.imgflip.com/1bij.jpg")
 */

class MemeGenerator extends Component {
  constructor() {
    super();
    this.state = {
      topText: "",
      bottomText: "",
      randomImg: "http://i.imgflip.com/1bij.jpg",
      allMemeImgs: [],
    };

    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    fetch("https://api.imgflip.com/get_memes")
      .then((response) => response.json())
      .then((response) => {
        const { memes } = response.data;
        this.setState({ allMemeImgs: memes });
      });
  }
  /**
   * We'll be using an API that provides a bunch of meme image
   *
   * Your task :
   * make an API call to "https://api.imgflip.com/get_memes" and save the
   * data that comes back (`response.data.memes`) to a new state property
   * called `allMemeImgs`. (The data that comes back is an array)
   *
   */

  /**
   * Create the onChange handler method
   * It should update the corresponing state on every change of the input box
   */

  handleChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  render() {
    return (
      <div>
        <form className="meme-form">
          {/**
           * Create 2 input fileds, one for the topText and one for the bottomText
           * Remember that these will be "controlled forms", so make sure to add
           * all the attributes you'wll need for that to work
           */}
          <input
            type="text"
            name="topText"
            placeholder="Top Text"
            value={this.state.topText}
            onChnage={this.handleChange}
          />
          {/** Create the onChange handler method It should update the
          corresponding state on every change of the input box */}
          <input
            type="text"
            name="bottomText"
            placeholder="Bottom Text"
            value={this.state.bottomText}
            onChange={this.handleChange}
          />
          <button>Gen</button>
        </form>
        <div className="meme">
                    <img src={this.state.randomImg} alt="" />
                    <h2 className="top">{this.state.topText}</h2>
                    <h2 className="bottom">{this.state.bottomText}</h2>
                </div>
      </div>
    );
  }
}

export default MemeGenerator;


/**
 * Other modern/advanced React features/topics to learn:
 * 
 * Official React Context API - https://reactjs.org/docs/context.html
 * Error Boundaries - https://reactjs.org/docs/error-boundaries.html
 * render props - https://reactjs.org/docs/render-props.html
 * Higher Order Components - https://reactjs.org/docs/higher-order-components.html
 * React Router - https://reacttraining.com/react-router/core/guides/philosophy
 * React Hooks - https://reactjs.org/docs/hooks-intro.html
 * React lazy, memo, and Suspense - https://reactjs.org/blog/2018/10/23/react-v-16-6.html
 */

useState 하는데 왤케 어렵냐...

import React, { useState } from "react";

function App() {
  const [answer] = useState("Yes");
  console.log(answer);

  const person = {
    name: "Joe",
    age: 42,
  };

  const { name, age } = person;

  return (
    <div>
      <h1>Is state important to know? {answer}</h1>
    </div>
  );
}

export default App;