과제1 toDoList 만들기

// state, effectm props 연습해서 todoList 만들기
import Button from "./Button";
import styles from "./App.module.css";
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;
    }
    //자바스크립트였다면 toDos 에 넣을때 toDos.push() 했겠지만, state는 직접적으로 수정할 수 없다.
    setToDos((currentArray) => [toDo, ...toDos]); //점 세개를 찍어서 currentArray를 가져올 수 있다. 결국은 이 두개가 더해진다는 것. ..toDos 는 ...currentArray이다.
    setToDo(""); //반드시 수정하는 함수를 사용해서 state를 수정해야 한다.
    // 방법은 두가지가 있다 1. 값을 직접적으로 수정하는방법 2. setToDos에 함수를 넣는 것
    // setToDos의 함수는 첫번째 argument로 현재의 state를 받아 올 것이다.
    //setToDos(currentArray =>) 는 setToDos(function(currentArray))와 같다
  };

  return (
    <div className="App">
      <h1>My To Do List</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="beautiful..."
        />
        <button>Go!</button>
        {/* //버튼 클릭했을 때 form 의 submit을 발생시켜보자
        //다음으로 해야할 것은 여러개의 todo 를 받을 수 있는 array를 만드는 것이다. 
       //map함수는 배열을 가지고 있을 때 각각의 element를 바꿀 수 있게 해주는 함수이다.
       //map() 은 ()에 함수를 넣을 수 있는데 배열의 모든  item에 대해 실행한다. */}
      </form>
      <ul>
        {toDos.map((item) => (
          <li>{item}</li> //map을 이용해 array의 각각의 원소를 컴포넌트로 만들어준다.
        ))}
      </ul>
      {/* //그리고 이것을 전체<ul><ul/>에 넣는 과정이 필요하다 */}
    </div>
  );
}

export default App;

과제2 toDoList를 컴포넌트로 분리하기

app.js

// state, effectm props 연습해서 todoList 만들기

import { useState } from "react";
import List from "./List";

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;
    }
    //자바스크립트였다면 toDos 에 넣을때 toDos.push() 했겠지만, state는 직접적으로 수정할 수 없다.
    setToDos((currentArray) => [...toDos, toDo]); //점 세개를 찍어서 currentArray를 가져올 수 있다. 결국은 이 두개가 더해진다는 것. ..toDos 는 ...currentArray이다.
    setToDo(""); //반드시 수정하는 함수를 사용해서 state를 수정해야 한다.
    // 방법은 두가지가 있다 1. 값을 직접적으로 수정하는방법 2. setToDos에 함수를 넣는 것
    // setToDos의 함수는 첫번째 argument로 현재의 state를 받아 올 것이다.
    //setToDos(currentArray =>) 는 setToDos(function(currentArray))와 같다
  };

  return (
    <div className="App">
      <h1>My To Do List</h1>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={toDo}
          type="text"
          placeholder="beautiful..."
        />
        <button>Go!</button>
        {/* //버튼 클릭했을 때 form 의 submit을 발생시켜보자
        //다음으로 해야할 것은 여러개의 todo 를 받을 수 있는 array를 만드는 것이다. 
       //map함수는 배열을 가지고 있을 때 각각의 element를 바꿀 수 있게 해주는 함수이다.
       //map() 은 ()에 함수를 넣을 수 있는데 배열의 모든  item에 대해 실행한다. */}
      </form>
      <ul>
        <List items={toDos} />
          // 이 부분을 주목하라~!!!!!!!!!!
        {/* {toDos.map((item) => (
          <li>{item}</li> //map을 이용해 array의 각각의 원소를 컴포넌트로 만들어준다.
        ))} */}
      </ul>
      {/* //그리고 이것을 전체<ul><ul/>에 넣는 과정이 필요하다 */}
    </div>
  );
}

export default App;

List.js

import React from "react";
import ListElement from "./ListElement";
function List(props) {
  return (
    <>
      {props.items.map((item) => {
        return <ListElement item={item} />;
      })}
    </>
  );
}

export default List;

// 위 <></> 익명 태그로 묶어줘야 한다 !! return은 한 단위로 해야하므로..

ListElement.ks

import React from "react";
function ListElemnt(props) {
  return <li>{props.item}</li>;
}

export default ListElemnt;