카테고리 없음
23/11/07 react 해설듣고 다시해본 todolist
한지지우우
2023. 11. 7. 23:22
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react"; //useState 사용하기 위한 임포트
import uuid from "react-uuid"; // uuid 는 map함수 돌리면 key값을 요구하는데 거기에 넣을 id값을 랜덤하게 받을수있음
function App() {
const [title, settitle] = useState("");
const [contents, setcontents] = useState("");
const [todos, settodos] = useState([
{
id: 1,
title: "제목 1", // 어레이에 객체 하나하나 들어있는 투두스 초기값
contents: "내용 1",
isdone: false,
},
{
id: 2,
title: "제목 2",
contents: "내용 2",
isdone: true,
},
{
id: 3,
title: "제목 3",
contents: "내용 3",
isdone: false,
},
{
id: 4,
title: "제목 4",
contents: "내용 4",
isdone: true,
},
]);
const doingtodo = todos.filter(function (todo) {
return todo.isdone === false; // 여기서 투두스 안에 투두의 isdone 값이 폴스이냐 트루이냐에
}); //따라 구분해 놓는다.
const donetodo = todos.filter(function (todo) {
return todo.isdone === true;
});
return (
<>
<header>
<h1>투두리스트</h1>
<form
onSubmit={function (e) { //폼태그 하위에 버튼태그가 있는데 버튼태그에는 서브및 이 기본값으로 설정
e.preventDefault(); //되어있다고함 폼태그 안에 버튼을 클릭하면 onsbmit을 준 폼태그가 작동됨
const addtodo = { // 폼태그가 호출되면 계속 새로고침되니까 프리벤트 디폴트를 준다.
id: uuid(), // 소괄호를 열고 닫아줘야함. 흐음 일단 기억
title: title, // 아까 말했던 uuid()를 이용해서 id값을 매번 다르게 준다. uuid()는 터미널에서
contents: contents, // 한번 받아야함 //타이틀은 유즈스테이트의 타이틀 로 주고 컨텐츠도 이하동문
isdone: false, //isdone 은 폴스와 트루값이 있는데 이걸 이용해서 태그위치 이동
};
settodos([...todos, addtodo]); // 불변성 유지를 위해 투두스를 펼치고 애드 투두를 포함하는 새 배열생성해서
}} //셋투두스를 통해 투두스 변경
>
제목 :{" "}
<input
value={title} //이것은 인풋 태그의 타이틀 타이핑하는 내용으로 변경되게 하는설정
onChange={function (e) {
settitle(e.target.value);
}}
></input>
내용 :{" "}
<input
value={contents}
onChange={function (e) { //이하동문
setcontents(e.target.value);
}}
></input>
<button>추가하기</button> //추가하기 버튼으로 셋투두스가 작동하여 애드투두가 투두스에 추가됨
</form>
</header>
<main>
<h1>진행중인 투두</h1>
<div
style={{
display: "flex", //css는 일단 대충 보기 편할정도만
}}
>
{doingtodo.map(function (todo) { // 맵함수를 통해 위에서 isdone이 폴스인 새로운 어레이인 두잉투두
return ( // 리턴값의 모양으로 뿌려준다.
<div
style={{
marginLeft: "20px",
marginBottom: "20px",
border: "black solid 1px",
width: "300px",
}}
>
<div>id : {todo.id}</div> <br /> //펑션에 파라미터로 투두뒀으니까 투두위 하위요소인 아이디
<div>제목': {todo.title}</div> <br />
<div>내용 : {todo.contents}</div> <br /> //이하동문
<div>진행상태 : {String(todo.isdone)}</div> <br /> //블리언값이므로 스트링화
<button //요 버튼태그는 눌렀을때 해당 투두를 삭제하기 위한것
onClick={function () {
const deletedtodo = todos.filter(function (item) { //투두스의 투두중에 아이디가 다른것만 남기기위한
return todo.id !== item.id; //로직
});
settodos(deletedtodo); //셋투두스 잊지 말고
}}
>
삭제하기
</button>
<button
onClick={function () { //요게 이제 누르면 태그가 옮겨지는버튼
const movingtodo = todos.map(function (item) {
if (item.id === todo.id) { // 투두스의 투두의 아이디와 요 돌아가는 해당요소의 아이디가 같으면
return {
...item, //요게 이해는 되는데 막상 치려니까 안쳐짐
isdone: !item.isdone, // 요소의 isdone값을 트루는 폴스로 폴스는 트로로 바꿈
};
} else {
return item; // 아이디가 같지 않다면 그대로 둠
}
});
settodos(movingtodo); //요걸 셋투드스함 //이러면 폴스 트루에 따라 위치하는 태그가 바뀌는
}} //원리로 태그가 바뀜 // 이해는 일단 됨
>
완료
</button>
</div>
);
})}
</div>
<h1>완료된 투두</h1>
<div
style={{
display: "flex",
}}
>
{donetodo.map(function (todo) {
return (
<div
style={{
marginLeft: "20px",
marginBottom: "20px",
border: "black solid 1px",
width: "300px",
}}
>
<div>{todo.id}</div> <br />
<div>{todo.title}</div> <br />
<div>{todo.contents}</div> <br />
<button
onClick={function () {
const deletedtodo = todos.filter(function (item) {
return todo.id !== item.id;
});
settodos(deletedtodo);
}}
>
삭제하기
</button>
<button
onClick={function () {
const movingtodo = todos.map(function (item) {
if (item.id === todo.id) {
return {
...item,
isdone: !item.isdone,
};
} else { //이하동문 삭제버튼 진행버튼 위에것들과 같은로직
return item;
}
});
settodos(movingtodo);
}}
>
진행
</button>
</div>
);
})}
</div>
</main>
<footer>푸드파이터?ㅋㅋ</footer>
</>
);
}
export default App;
//컴포넌트 분리는 시도해봤는데 자꾸 오류나서 원인 못찾고 ㅋ 그만둠 내일해야징