[TIL] 2022-12-15 내배캠 후발대 Todolist 만들기 '추가'하는 부분까지2

todolist만들기 todo 추가 부분까지

 

그냥 싹 다 외워버렸다. 코드를...

import { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

// JavaScript Zone

function App() {
  /* ********************************STYLE이 정의되는 영역 시작**************** */
  // header 스타일
  const headerStyleObj = {
    backgroundColor: '#faad31',
    padding: '20px',
  };
  // main 스타일
  const mainStyleObj = {
    backgroundColor: '#f3ce7d',
    padding: '20px',
  };
  // footer 스타일
  const footerStyleObj = {
    backgroundColor: '#f4fb1c',
    padding: '20px',
  };
  //div 스타일
  const divStyleObj = {
    padding: '10px',
    border: '1px solid black',
  };
  //input 태그 스타일
  const inputStyleObj = {
    marginRight: '10px',
  };
  // todo div 태그 스타일
  const todoDivStyleObj = {
    margin: '10px',
    border: '1px solid black',
    backgroundColor: '#ffed9a',
  };

  const initialState = [
    {
      title: '제목1',
      contents: '내용1',
      isDone: false,
      id: uuidv4(),
    },
    {
      title: '제목2',
      contents: '내용2',
      isDone: false,
      id: uuidv4(),
    },
    {
      title: '제목3',
      contents: '내용3',
      isDone: false,
      id: uuidv4(),
    },
    {
      title: '제목4',
      contents: '내용4',
      isDone: false,
      id: uuidv4(),
    },
    {
      title: '제목5',
      contents: '내용5',
      isDone: false,
      id: uuidv4(),
    },
  ];

  const [todos, setTodos] = useState(initialState);
  const [title, setTitle] = useState('');
  const [contents, setContents] = useState('');

  return (
    <div>
      {/* 여기가 우리의 플레이그라운드
            JSX문법으로 구성되는 영역 */}

      <header style={headerStyleObj}>헤더영역</header>
      <main style={mainStyleObj}>
        <div style={divStyleObj}>
          <input
            style={inputStyleObj}
            type='text'
            value={title}
            onChange={(e) => {
              setTitle(e.target.value);
            }}
          />
          <input
            style={inputStyleObj}
            type='text'
            value={title}
            onchange={(e) => {
              setContents(e.target.value);
            }}
          />
        </div>
        <button
          onClick={() => {
            //title과 contents를 state로부터 가져올거임
            // 새로운 객체 todo를 만들것임
            const newTodo = {
              title,
              contents,
              isDone: false,
              id: uuidv4(),
            };
            // 새로운 객체를 todos에 넣고싶음
            // todos를 변경하려면 setTodos가 유일한 방법
            const newTodos = todos.map((item) => item); // 기존의 배열을 그대로 가져와서 다시 새롭게 출력
            newTodos.push(newTodo); //거기에 새로운 요소를 끼워줌
            setTodos(newTodos); // 새로운 배열을 세팅, 갱신
          }}
        >
          추가
        </button>
        <div className='todoList' style={divStyleObj}>
          {/* 전체적은 todos를 불러올거임 */}
          {todos

            .filter((item) => !item.isDone ?? item)

            .map((item) => {
              return (
                <div style={todoDivStyleObj} key={item.id}>
                  <p>{item.title}</p>
                  <p>{item.contents}</p>
                  <button>완료</button>
                  <button>취소</button>
                </div>
              );
            })}
          <div className='doneList' style={divStyleObj}>
            {/* 전체적은 todos를 불러올거임 */}
            {todos

              .filter((item) => item.isDone ?? item)

              .map((item) => {
                return (
                  <div style={todoDivStyleObj} key={item.id}>
                    <p>{item.title}</p>
                    <p>{item.contents}</p>
                    <button>완료</button>
                    <button>취소</button>
                  </div>
                );
              })}
          </div>
        </div>
      </main>
    </div>
  );
}