2023. 6. 7. 16:41ㆍGithub 프로젝트/todolist반응형웹앱
지난 시간 반응형 웹&앱 UI 작성편을 이어서 기능 추가를 진행하였습니다.
이 글을 보기 전, 아래의 링크를 먼저 수행 하신 후 다음 단계로 넘어가시면 되겠습니다.
(3) 반응형 Todolist UI 작업 진행 : https://berkley.tistory.com/7
이번 시간은 TodoList의 CRUD 기능이 추가 된 형태의 대해서 다뤄보겠습니다.
CRUD 중 추가, 읽기 부분을 다뤄보도록 할 것이며, 다음 시간에는 갱신을 다루겠습니다.
1. Todolist 모듈에 state값을 저장하여 읽기 구현
1-1) useState를 이용하여 필요한 데이터 저장 (예시)
/**
* 필요 key:value값
* title, contents
* 이 값은
*/
const [todoList, setTodoList] = useState([]);
useEffect(() => {
setTodoList([
{
title: "Redux 학습하기",
contents: [
"로그인/로그아웃 가능 여부 확인",
"localstorage/sessionstorage 학습",
],
},
{
title: "SpringBoot 학습하기",
contents: ["Spring Security 구현", "Spring MVC 패턴 익히기"],
},
{
title: "JWT 인증 처리",
contents: ["JWT 개념 익히기"],
},
]);
}, []);
1-2) state에 저장된 todoList 변수를 샘플용 UI 데이터를 제거 하고, map을 이용하여 출력
<div className="todo">
{
// 다음은 각각 데이터를 불려올 때 map을 주로 사용합니다.
// todoList에 저장된 state 값을
// 유사 forEach문처럼 todo를 이용하여 출력하고,
// 상위 div에 key값을 설정하기 위해 index 값을 집어 넣어야 합니다.
todoList?.map((todo, index) => (
<div key={index} className="todoContainer">
<div className="todoTitle">
{todo?.title} <PlusCircle />
</div>
{todo?.contents?.map((tc, tcIndex) => (
<div key={tcIndex} className="todoContents">
- {tc} <Trash3 />
</div>
))}
</div>
))
}
</div>
여기까지 오셨으면 아래와 같이 출력되어집니다.
(1) 1200px 초과
(2) 600px ~ 1200px
(3) 600px 미만
2. Todolist 모듈에 state값으로 추가부분 구현
먼저, 추가부분에 대해서 onChange 기능을 만들기 위해 셋팅해 줍니다.
const [createInputTitle, setCreateInputTitle] = useState();
/**
* 다음은 TodoList 입력용 이벤트 함수
*/
const createTitleOnchange = (e) => {
const { name, value } = e.target;
setCreateInputTitle({
...createInputTitle,
[name]: value,
});
};
다음으로 추가 버튼을 클릭 시 TodoList값으로 저장하는 기능으로 출력하는 메서드를 만들어 줍니다.
/**
* 입력시 Todolist 추가하는 기능
*/
const createTitleButton = () => {
let to = [];
to.push(...todoList);
to.push({
title: createInputTitle?.title,
contents: [],
});
setTodoList(to);
console.log(to);
};
.
마지막으로 입력, 추가 구현된 UI 부분을 아래와 같이 수정해줍니다.
Input 부분은 title, defaultValue을 state값에 저장될 createInputTitle, 입력시 값 저장을 위해 onChange에 대입하고,
입력 후 Todolist에 추가 될 버튼 기능 동작하기 위해 CreateTitleButton을 넣어주고 테스트를 진행합니다.
<Form className="addGroup">
<Input className="addInput" name="title" defaultValue={createInputTitle} onChange={createTitleOnchange} />
<Button className="addButton" onClick={createTitleButton}>추가</Button>
</Form>
테스트 이후, 값이 추가 되는지 확인 할 수 있습니다.
3. 지금까지 완성된 코드
import {
Button,
Card,
CardBody,
CardHeader,
CardTitle,
Form,
Input,
} from "reactstrap";
import "./App.css";
import { PlusCircle, Trash3 } from "react-bootstrap-icons";
import { useEffect, useState } from "react";
function App() {
/**
* 필요 key:value값
* title, contents
* 이 값은
*/
const [todoList, setTodoList] = useState([]);
useEffect(() => {
setTodoList([
{
title: "Redux 학습하기",
contents: [
"로그인/로그아웃 가능 여부 확인",
"localstorage/sessionstorage 학습",
],
},
{
title: "SpringBoot 학습하기",
contents: ["Spring Security 구현", "Spring MVC 패턴 익히기"],
},
{
title: "JWT 인증 처리",
contents: ["JWT 개념 익히기"],
},
]);
}, []);
const [createInputTitle, setCreateInputTitle] = useState();
/**
* 다음은 TodoList 입력용 이벤트 함수
*/
const createTitleOnchange = (e) => {
const { name, value } = e.target;
setCreateInputTitle({
...createInputTitle,
[name]: value,
});
};
/**
* 입력시 Todolist 추가하는 기능
*/
const createTitleButton = () => {
let to = [];
to.push(...todoList);
to.push({
title: createInputTitle?.title,
contents: [],
});
setTodoList(to);
console.log(to);
};
return (
<div className="my-2 background-container">
<Card className="my-2 container">
<CardHeader className="header-container">
To-do list 반응형 웹 개발
</CardHeader>
<CardBody>
<CardTitle tag="h2">To-do list</CardTitle>
<div className="todo">
{
// 다음은 각각 데이터를 불려올 때 map을 주로 사용합니다.
// todoList에 저장된 state 값을
// 유사 forEach문처럼 todo를 이용하여 출력하고,
// 상위 div에 key값을 설정하기 위해 index 값을 집어 넣어야 합니다.
todoList?.map((todo, index) => (
<div key={index} className="todoContainer">
<div className="todoTitle">
{todo?.title} <PlusCircle />
</div>
{todo?.contents?.map((tc, tcIndex) => (
<div key={tcIndex} className="todoContents">
- {tc} <Trash3 />
</div>
))}
</div>
))
}
</div>
{/**
*
*/}
<Form className="addGroup">
<Input className="addInput" name="title" defaultValue={createInputTitle} onChange={createTitleOnchange} />
<Button className="addButton" onClick={createTitleButton}>추가</Button>
</Form>
</CardBody>
</Card>
</div>
);
}
export default App;
다음시간에는 TodoList 기본 기능 중 갱신 부분에 대해 다루겠습니다.
'Github 프로젝트 > todolist반응형웹앱' 카테고리의 다른 글
(6) Todo List 기본 기능 CRUD 추가 - 3 (삭제) (0) | 2023.06.08 |
---|---|
(5) Todo List 기본 기능 CRUD 추가 - 2 (갱신) (0) | 2023.06.08 |
(3) 반응형 Todolist UI 작업 진행 (0) | 2023.06.06 |
(2) Todolist 작업 전 반응 형 웹&앱 설정 (0) | 2023.06.06 |
(1) 시작하기 전 - 소개 (0) | 2023.06.06 |