6.0 Introduction

기본식 -> 여러번 써보고 외우기

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => {
    setValue((prev) => prev + 1);
  }
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

6.4 clean up

function Hello() {
  function byeFn(){
    console.log("Bye :(");
  }
  function HiFn(){
    console.log("Hi :)");
    return byeFn;
  }
  useEffect(HiFn, []);
  return <h1>Hello</h1>;
}

같은 코드임

function Hello() {
useEffect(() => {
    console.log("Hi :)");
    return () => console.log("Bye :(");
  }, []);
  return <h1>Hello</h1>;
}

같은 코드임

function Hello() {
useEffect(function(){
    console.log("Hi :)");
    return function() {
      console.log("Bye :(");
    }
  }, []);
  return <h1>Hello</h1>;
}

---

7.1 To Do List part Two

import { useState } from "react";

function App() {
  const [toDo, setTodo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setTodo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if (toDo === "") {
      return; // toDo가 비어있다면 이 함수 작동 x (killed)
    }
    setToDos((currentArray) => [toDo, ...currentArray]);
    setTodo("");
  };
  console.log(toDo, "toDo", setTodo, "setTodo");
  console.log(toDos, "toDos", setToDos);

  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
        <input
          value={toDo}
          onChange={onChange}
          type="text"
          placeholder="Write your to do..."
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

• toDo: 사용자가 input에 입력하는 현재 할 일입니다. 새로운 할 일을 저장하는 변수죠. 이 값은 사용자가 입력할 때마다 업데이트됩니다.
• toDos: 입력된 할 일들의 집합 배열입니다. 사용자가 toDo를 입력하고 제출할 때마다 toDos 배열에 추가됩니다.

즉, toDo는 입력 중인 단일 할 일, toDos는 이미 저장된 여러 할 일들의 배열입니다.

• toDo: input 필드에 입력되는 새로운 할 일.
• toDos: 여러 개의 할 일(배열).

7.3 Movie App part One

then과 async 비교

then

useEffect(() => {
    fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    )
      .then((response) => response.json())
      .then((json) => {
        setMovies(json.data.movies);
        setLoading(false);
      });
  }, []);

async

const getMovies = async () => {
    const response = await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    );
    const json = await response.json();
    setMovies(json.data.movies);
    setLoading(false);
  };
  useEffect(() => {
    getMovies();
  }, []);

async short cut

const getMovies = async () => {
    const json = await (await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    )).json();
    
    setMovies(json.data.movies);
    setLoading(false);
  };
  
  useEffect(() => {
    getMovies();
  }, []);

---