(4) Todo List 기본 기능 CRUD 추가 - 1 (읽기, 쓰기)

2023. 6. 7. 16:41Github 프로젝트/todolist반응형웹앱

728x90
반응형
SMALL

지난 시간 반응형 웹&앱 UI 작성편을 이어서 기능 추가를 진행하였습니다.

이 글을 보기 전, 아래의 링크를 먼저 수행 하신 후 다음 단계로 넘어가시면 되겠습니다.

(3) 반응형 Todolist UI 작업 진행 : https://berkley.tistory.com/7

 

(3) 반응형 Todolist UI 작업 진행

지난 시간 (1) 시작하기전 : https://berkley.tistory.com/5 (1) 시작하기 전 1. 개발 환경 - Nodejs : 16.18.0 - npm : 9.6.3 - VScode - Prettier - SCSS/SASS - style-component - ReactStrap 2. 작업 셋팅 준비 1. 먼저 Nodejs를 설치합니

berkley.tistory.com

 

 

이번 시간은 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 초과

1200px 초과

 

(2) 600px ~ 1200px

600px ~ 1200px

 

 

(3) 600px 미만

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 기본 기능 중 갱신 부분에 대해 다루겠습니다.

https://berkley.tistory.com/9

 

(5) Todo List 기본 기능 CRUD 추가 - 2 (갱신)

지난시간 CRUD의 읽기, 쓰기의 대해서 다뤄봤습니다. (4) Todo List 기본 기능 CRUD 추가 - 1 (읽기, 쓰기) : https://berkley.tistory.com/8 (4) Todo List 기본 기능 CRUD 추가 - 1 (읽기, 쓰기) 지난 시간 반응형 웹&앱 U

berkley.tistory.com

 

 

 

 

728x90
반응형
LIST