리액트의 state상태와 화면 다시 렌더링(re rendering)

### 리액트의 state 상태를 이용하여 Todo List 앱을 만들어 본다.

작업환경: https://codesandbox.io/s/?utm_source=landingpage 

- 위 작업환경에서 react 를 선택한다.(아래)

- 작업 순서 : App.js, TodoList.jsx, TodoItem.jsx, App.css

- App.js 소스( src폴더 아래 추가 )

import React, { useState, useEffect, useRef } from "react";
import "./App.css";
import "./components/TodoList";
import TodoList from "./components/TodoList";
/**
# 컴포넌트 구조를 만들고, 기능을 정의한다.
1. input 박스로 입력 시키는 화면을 만든다 반복되는 아이템 목록 리스트 부분은 컴포넌트로 분리한다.
2. 위 화면에서 값을 입력하고 할일추가 버튼을 누르면 아이템이 추가된다
3. 아이템 할일삭제 버튼을 누르면 삭제 된다
 */
function App(props) {

  const [todo, setTodo] = useState("");
  const inputRef = useRef(); // 화면이 다시 렌더링 되는 것을 방지하기 위해서
  const [todoList, setTodoList] = useState([]);
  const addItem = () => {
    setTodo(inputRef.current.value);
    //console.log("입력한 값", todo);
    //setTodoList([...todoList, todo]); // onChange사용시 기존 배열에 할일 추가
    if(inputRef.current.value) {
      setTodoList([...todoList, inputRef.current.value]); // onChange에서 화면이 너무 re 렌더링 되는 것을 방지-todo 대신사용
    }
  };
  useEffect(() => {
      // 컴포넌트 로딩-마운트 이후에 변경된 todo 상태값을 초기화 및 화면 초기화(아래)
      console.log("입력한 값1", todo); // 상태함수:화면이 마운트-로딩된 이후에 todo값이 변경되면 자동으로 실행된다.
      setTodo(""); // 입력한 값을 초기화 한다.
      inputRef.current.value = ""; // 입력 화면을 초기화 한다.
  }, [todo]); // todo값이 변경 될 때만 위 useEffect(코드)가 실행된다.
  return (
    <main>
      <h1>할일목록-Todo List</h1>
      <input type="text" ref={inputRef} />
      {/*value={todo} onChange={(e) => setTodo(e.target.value)}*/}
      {/* console.log(e.target.value) */}
      <button onClick={addItem}>할일추가</button>
      <TodoList todoList={todoList} />
    </main>
  );
}
export default App;

- TodoList.jsx 소스(src/componetns폴더를 생성 후 아래)

import React from "react";
import TodoItem from "./TodoItem";
function TodoList(props) {
  console.log("할일 목록: ", props.todoList);
  return (
    <div>
      <h2>목록</h2>
      {props.todoList.map((
        item,
        index //map함수의 자식컴포넌트에 key 속성이 필요하다.
      ) => (
        <TodoItem item={item} key={index} />
      ))}
      {/*<TodoItem />
      <TodoItem />*/}
    </div>
  );
}
export default TodoList;

- TodoItem.jsx 소스 (src/componetns폴더를 생성 후 아래)

import React from "react";
function TodoItem(props) {
  return <div className="todo-item">{props.item}</div>;
}
export default TodoItem;

- App.css 작업소스(src폴더 아래 추가)

.todo-item {
  width:300px;
  height:50px;
  border:1px solid blue;
}

- 작업결과(아래)