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


保留中のリスト部分の構成部品を作成する(構成部品を分離する)

早く分けたほうがいいです.
srcフォルダに構成部品フォルダを作成します.
そこjsからlistの分離を開始
app.js
// 함수형 
import React, {useState} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기
import "./App.css";
import List from "./components/List";

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

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



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(""); 
  // ... : 전개연산자 
  // 이미 있는거에 새로운거 더해주기
  //입력란 안에 있던 글시 지워주기 설명 안하노 ㅋㅋ 
}






    return( // 반환한다 
      // 컨테이너를 감싸고
      <div className="container">
        {/* div박스하나를 만든다. 투두블락 */}
        <div className="todoBlock">
          {/* 그리고 제목박스도  */}
          <div className="title">
            My To do List 
          </div>

          <List todoData={todoData} setTodoData={setTodoData}/>
          {/* 밑에서부터 할일 목록을 나열한다 */}
          {/* 반복형으로 나열 */}

          <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>
      
    )
  
}
List.js
// rfc 엔터하면 함수형 컴포넌트 만들기 가능 
import React from 'react'

export default function List({todoData, setTodoData}) {

    const btnStyle = {
        color : "#fff",
        border : "none",
        padding : "5px 9px",
        borderRadius : "50%",
        cursor : "pointer",
        float : "right",
      };
    const handleCompleteChange = (id) =>{
        let newTodoData = todoData.map(data=>{
        if(data.id === id){
        data.completed = !data.completed; 
        }
        return data; 
    });
    setTodoData(newTodoData);
    this.setState({todoData:newTodoData});
    };

    //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가 와서 데이터의 아이디가 아닌것만 트루를 반환해서 살린다 
        setTodoData(newTodoData);
    };

  return (
    <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>
        ))}
    </div>
  )
}
五胡
ぶんぱいこうぞうぶんかい
構造分解配分とは?
js式は、配列やオブジェクトの属性を分解することで、その値を各変数に含めることができます.
->コードをクリーニングするために!
オブジェクト構造分解の割り当て

深いオブジェクト構造の分解を割り当てる

アレイ構造分解の割り当て

Formセクションの構成部品の作成
  • UI部導入
  • 必要な関数
  • をインポートする.
    Propsを
  • Form構成部品
  • に降格
  • Propsを使用して必要なデータ関数をインポート
    を選択します.
    最終ファイル
  • App.js
    // 함수형 
    import React, {useState} from "react";  // 리액트 라이브러리에서 컴포넌트 들고오기
    import "./App.css";
    import Form from "./components/Form";
    import List from "./components/List";
    
    export default function App(){ // 컴포넌트를 사용할 수 있게 extends
    
      // state = { //객체로 state 생성 
      //   todoData : [], //배열안에 객체넣기 
      //   value:"",
      // };
      //state바꿔주기 
      const [todoData,setTodoData] = useState([]);
      const [value,setValue] = useState("");
      //this.todoData -> todoData로 바꿔주기 
    
    const handleSumbit = (e) =>{
      //form아ㄴ에 input전송시 페이지 리로드 막자 
      e.preventDefault();
      //새로운 할 일 데이터 
      let newTodo = {
        id : Date.now(), //유니크한 값 
        title: value,
        completed : false, 
      }
      setTodoData(prev=>[...prev,newTodo]);
      setValue(""); 
      // ... : 전개연산자 
      // 이미 있는거에 새로운거 더해주기
      //입력란 안에 있던 글시 지워주기 설명 안하노 ㅋㅋ 
    }
        return( // 반환한다 
          // 컨테이너를 감싸고
          <div className="container">
            {/* div박스하나를 만든다. 투두블락 */}
            <div className="todoBlock">
              {/* 그리고 제목박스도  */}
              <div className="title">
                My To do List 
              </div>
              <List todoData={todoData} setTodoData={setTodoData}/>
              <Form handleSumbit={handleSumbit} value={value} setValue={setValue}/>
              {/* 밑에서부터 할일 목록을 나열한다 */}
              {/* 반복형으로 나열 */}
            </div>
          </div> 
        )
    }
    Form.js
    import React from 'react'
    
    export default function Form({handleSumbit,value,setValue}) {
    
        const handleChange =(e)=>{
    
            // this.setState({value : e.target.value});
            setValue(e.target.value); 
        };
        return (
            <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>
      )
    }
    
    List.js
    // rfc 엔터하면 함수형 컴포넌트 만들기 가능 
    import React from 'react'
    
    export default function List({todoData, setTodoData}) {
    
        const btnStyle = {
            color : "#fff",
            border : "none",
            padding : "5px 9px",
            borderRadius : "50%",
            cursor : "pointer",
            float : "right",
          };
        const handleCompleteChange = (id) =>{
            let newTodoData = todoData.map(data=>{
            if(data.id === id){
            data.completed = !data.completed; 
            }
            return data; 
        });
        setTodoData(newTodoData);
        this.setState({todoData:newTodoData});
        };
    
        //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가 와서 데이터의 아이디가 아닌것만 트루를 반환해서 살린다 
            setTodoData(newTodoData);
        };
    
      return (
        <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>
            ))}
        </div>
      )
    }
    

    起動成功!