[Chapter 4]To-Doアプリケーション最適化-2
保留中のリスト部分の構成部品を作成する(構成部品を分離する)
早く分けたほうがいいです.
srcフォルダに構成部品フォルダを作成します.
そこjsからlistの分離を開始
app.js
ぶんぱいこうぞうぶんかい
構造分解配分とは?
js式は、配列やオブジェクトの属性を分解することで、その値を各変数に含めることができます.
->コードをクリーニングするために!
オブジェクト構造分解の割り当て
深いオブジェクト構造の分解を割り当てる
アレイ構造分解の割り当て
Formセクションの構成部品の作成 UI部導入 必要な関数 をインポートする.
Propsを Form構成部品 に降格 Propsを使用して必要なデータ関数をインポート
を選択します.
最終ファイル App.js
起動成功!
早く分けたほうがいいです.
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セクションの構成部品の作成
Propsを
を選択します.
最終ファイル
// 함수형
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.jsimport 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>
)
}
起動成功!
Reference
この問題について([Chapter 4]To-Doアプリケーション最適化-2), 我々は、より多くの情報をここで見つけました https://velog.io/@seochan99/Chapter-4-To-Do-앱-최적화-하기-2テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol