[Chapter 4]To-Doアプリケーションの最適化-1

のHOC素子の代わりにCRHを用いて,大量のWrapper素子を減少させた.
Higher Order Componentとは?
画面上の再利用可能な論理をコンポーネントに分離し、再利用不可能なuiなどの他の部分をパラメータとして受信および処理する方法
プレイヤーリストを繰り返しhocを作成します.

特設はこうなる

こんな問題が発生した.
CRHで解決しよう!

整理するなら.

ToDoアプリケーションをクラス構成部品から関数構成部品に変更する
置換

// 함수형 
import React, {useState} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기
import "./App.css";

export default function App(){ // 컴포넌트를 사용할 수 있게 extends

  // state = { //객체로 state 생성 
  //   todoData : [], //배열안에 객체넣기 
  //   value:"",
  // };
  //state바꿔주기 
  const [todoData,setTodoData] = useState([]);
  const [value,setValue] = useState("");
  //this.todoData -> todoData로 바꿔주기 




const btnStyle = {
    color : "#fff",
    border : "none",
    padding : "5px 9px",
    borderRadius : "50%",
    cursor : "pointer",
    float : "right",
  }

//style 
const getStyle = (completed) =>{
  return{
    padding : "10px",
    borderBottom:"1px #ccc dotted",
    textDecoration : completed ? "line-through" : "none",
  }
}

//할일 목록 삭제 함수 
const hanndleClick=(id)=>{
  //filter method를 사용해서 
  //id가 같은거를 필터링 해버리자 
  let newTodoData = todoData.filter(data=> data.id !== id);
  console.log('newTodoData',newTodoData);
  //list의 id가 와서 데이터의 아이디가 아닌것만 트루를 반환해서 살린다 
  this.setState({todoData:newTodoData}); 
  setTodoData(newTodoData);
}

const handleChange =(e)=>{

  // this.setState({value : e.target.value});
  setValue(e.target.value); 

}
const handleSumbit = (e) =>{
  //form아ㄴ에 input전송시 페이지 리로드 막자 
  e.preventDefault();
  //새로운 할 일 데이터 
  let newTodo = {
    id : Date.now(), //유니크한 값 
    title: value,
    completed : false, 
  }
  setTodoData(prev=>[...prev,newTodo]);
  setValue(""); 
  // ... : 전개연산자 
  // 이미 있는거에 새로운거 더해주기
  //입력란 안에 있던 글시 지워주기 설명 안하노 ㅋㅋ 
}





const handleCompleteChange = (id) =>{
  let newTodoData = todoData.map(data=>{
    if(data.id === id){
      data.completed = !data.completed; 
    }
    return data; 
  });
  setTodoData(newTodoData);
  this.setState({todoData:newTodoData});
}
    return( // 반환한다 
      // 컨테이너를 감싸고
      <div className="container">
        {/* div박스하나를 만든다. 투두블락 */}
        <div className="todoBlock">
          {/* 그리고 제목박스도  */}
          <div className="title">
            My To do List 
          </div>
          {/* 밑에서부터 할일 목록을 나열한다 */}
          {/* 반복형으로 나열 */}
          {todoData.map(data=>(
            // this는 클래스를 가리키고 클래스 안에 todoData라는 리스트객체를 가지고 와서 그 안에 데이터를 꺼내는데 map함수를 써서 꺼낸다
            // map은 객체별 요소를 data라는 변수로 정해주고 data객체 안에 id,completed,title을 가져온다
            // style같은경우도 겹치는 경우가 많으니 this를 사용해서 클래스 내에 만들어둔 스타일을 가지고 와서 사용한다
            // react에서는 반복되는 값들을 가지고올때 유니크한 값와 같은 key값을 줘야한다 
            <div style={getStyle(data.completed)} key={data.id}>
              <input type="checkbox" defaultChecked={data.completed} onChange={()=>handleCompleteChange(data.id)}></input>
              {data.title}
              <button style={btnStyle} onClick={()=>hanndleClick(data.id)}>X</button>
            </div>
          ))}
          <form style={{ display : 'flex'}} onSubmit={handleSumbit}>
            <input 
              type="text" 
              name="value" 
              style={{flex:'10', padding:'5px'}} 
              placeholder="해야할 일 을 입력해주세요" 
              value={value}
              onChange={handleChange}
              />
            <input
              type="submit"
              value="입력"
              className="btn"
              style={{flex:'1'}}
            />
          </form>


        </div>
      </div>
      
    )
  
}