[Chapter 4] To-Do 앱 최적화 하기 -1

React Hooks란 무엇인가?

class 없이 state를 사용할 수 있는 새로운 기능

그렇담 함수형이 클래스형보다 뭘 더 못쓰는거지?

리액트 생명주기

를 못해준다..
그래서 함수가 더 간편해도 클래스를 써왔느데...
Hooks가 업데이트 되고 이제 사용가능하다!!

훅스의 또 다른 이점

• 훅스로 훨 코드가 깔끔해졌다
• useEffect안에서 모든걸 처리가 가능하다 !
• HOC 컴포넌트를 CRH로 대체해서 겁나 많은 Wrapper 컴포넌트를 줄이게 된다

HOC(Higher Order Component)란?

화면에서 재사용 가능한 로직만을 분리해서 컴포넌트로 만들고, 재사용 불가능한 ui와 같은 다른 부분들은 parameter로 받아서 처리하는 방법
유저리스트가 중복되니 hoc를 만들어준다.

hoc로 만들면 이렇게 된다

이런 문제가 발생했다..

CRH로 해결하자 !

정리하자면

To-Do 앱을 클래스 컴포넌트에서 함수형 컴포넌트로 바꾸기

바꾸장

1. 컴포넌트 자체를 바꾸기
2. render지우기..

해서 바꿔준 코드는 다음과 같다

// 함수형 
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>
      
    )
  
}

state와 props