[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발 12-1

수정중

새로운 게시물 추가

import React, { useState } from "react";
import { Form, Button } from 'react-bootstrap';

// interface 대신 type을 사용하는 이유 : 인터페이스는 객체의 구조를 정의할 때 사용. 지금은 새로운 타입만 정의되면 되기 때문
type Todo = {
  id: number;
  text: string;
  isChecked: boolean;
};

const TodoList: React.FC = () => {
  //Function Component의 약자. props의 타입을 명시하는 역할
  // state 사용 관리를 위해 타입 지정. state를 사용하면 상태관리가 가능.

  const title: string = "오늘 할 일";
  // 구조분해 할당
  const [todos, setTodos] = useState<Todo[]>([
    {
      id: 1,
      text: "투두 1",
      isChecked: false,
    },
    {
      id: 2,
      text: "투두 2",
      isChecked: false,
    },
  ]);

  const [newTodo, setNewTodo] = useState<string>('');


  const handleCheckedChange = (todoId: number) => {
    setTodos((prevItems) =>
      prevItems.map((item)=> {
        return item.id === todoId ? {...item, isChecked : !item.isChecked} : item;
      })
    )
  };
  const addTodo = () =>{
    if(newTodo.trim() !== '') {
      setTodos([...todos, {id : Date.now(), text : newTodo, isChecked : false}]);
      setNewTodo('');
    }

  }
  return (
    <div className="Todo-container">
      <div>
        <h1>{title}</h1>
      </div>
      <p></p>
      <div>
        {/* <Form.Control size="lg" type="text" placeholder="할 일을 추가해보세요"/> */}
        <input type="text" 
          placeholder="할 일을 추가해보세요"
          style={{marginRight : "10px", writingMode: "horizontal-tb"}}
          onChange={(e)=> setNewTodo(e.target.value)}  
        />
        <Button
          onClick={()=>{addTodo()}}
        >
          추가
        </Button>
        <br/>
      </div>
      <div className="board">
        <ul>
          {/* <li>{todos[0]}</li>  string -> JSON 형태로 변경했기 때문에 todo[0]의 무엇을 표현하고 싶은지 표기 필요*/}
          {/* <li>{todos[0].text}</li>
          <li>{todos[1].text}</li> */}
          {
            /* map으로 출력 */
            todos.map((todo) => (
              <li key={todo.id}>
                <input
                  type="checkbox"
                  onChange={() => {
                    handleCheckedChange(todo.id);
                  }}
                />
                {
                  todo.isChecked ? 
                    <del>{todo.text}</del>
                    : <span>{todo.text}</span>
                }
              </li>
            ))
          }
        </ul>
      </div>
    </div>
  );
};

export default TodoList;

시계 추가

import React, { useState } from "react";
import { Form, Button } from 'react-bootstrap';

// interface 대신 type을 사용하는 이유 : 인터페이스는 객체의 구조를 정의할 때 사용. 지금은 새로운 타입만 정의되면 되기 때문
type Todo = {
  id: number;
  text: string;
  isChecked: boolean;
};

const TodoList: React.FC = () => {
  //Function Component의 약자. props의 타입을 명시하는 역할
  // state 사용 관리를 위해 타입 지정. state를 사용하면 상태관리가 가능.

  const title: string = "오늘 할 일";
  // 구조분해 할당
  const [todos, setTodos] = useState<Todo[]>([
    {
      id: 1,
      text: "투두 1",
      isChecked: false,
    },
    {
      id: 2,
      text: "투두 2",
      isChecked: false,
    },
  ]);

  const [newTodo, setNewTodo] = useState<string>('');


  const handleCheckedChange = (todoId: number) => {
    setTodos((prevItems) =>
      prevItems.map((item)=> {
        return item.id === todoId ? {...item, isChecked : !item.isChecked} : item;
      })
    )
  };
  const addTodo = () =>{
    if(newTodo.trim() !== '') {
      setTodos([...todos, {id : Date.now(), text : newTodo, isChecked : false}]);
      setNewTodo('');
    }
    
  }
  return (
    <div className="Todo-container">
      <div>
        <h1>{title}</h1>
      </div>
      <p></p>
      <div>
        {/* <Form.Control size="lg" type="text" placeholder="할 일을 추가해보세요"/> */}
        <input type="text" 
          placeholder="할 일을 추가해보세요"
          style={{marginRight : "10px", writingMode: "horizontal-tb"}}
          onChange={(e)=> setNewTodo(e.target.value)}  
        />
        <Button
          onClick={()=>{addTodo()}}
        >
          추가
        </Button>
        <br/>
      </div>
      <div className="board">
        <ul>
          {/* <li>{todos[0]}</li>  string -> JSON 형태로 변경했기 때문에 todo[0]의 무엇을 표현하고 싶은지 표기 필요*/}
          {/* <li>{todos[0].text}</li>
          <li>{todos[1].text}</li> */}
          {
            /* map으로 출력 */
            todos.map((todo) => (
              <li key={todo.id}>
                <input
                  type="checkbox"
                  onChange={() => {
                    handleCheckedChange(todo.id);
                  }}
                />
                {
                  todo.isChecked ? 
                    <del>{todo.text}</del>
                    : <span>{todo.text}</span>
                }
              </li>
            ))
          }
        </ul>
      </div>
    </div>
  );
};

export default TodoList;