[React] 간단한 리스트게시판 생성

1) input에 입력하고 + 를 클릭시 하나씩 추가

2) X를 누를시 해당번호 삭제

3) 추가된 내용을 클릭시 백그라운드 색상 변경

1. top 에있는 input 만들기

return (
    <div className="App">
      <CreateTodo list={list} onChange={onChange} onCreate={onCreate} />
    <TodoLists todos={todos} onDelete={onDelete} onToggle={onToggle} />
    </div>
    전체 화면 표출 내용

    CreateTodo
    const CreateTodo = ({onChange, list, onCreate}) => {
    return (
        <div className='top'>
            <h2>to do list</h2>
            <div><input type="text" value={list} name="list" onChange={(e)=>{onChange(e.target.value)}} />
            <button onClick={onCreate}>+</button></div>
        </div>
    );
};

input에서 값을 입력시 실행되는 onChang를 사용해 해당 내용을 e로 받아와 .value 값으로 onChange 실행

const [ list, setList] = useState("");
    // input에 값을 입력할때 onChange함수를 실행
    // 실행시 state인 list값을 input의 value값으로 변경
    const onChange = (list) => {
      setList(list)
    }

버튼 클릭시 onCreate가 실행되도록 만들어 져 있다.
기본으로 들어가있는 내용은 3개 이며

  const [ todos, setTodos ] = useState([
        {
            id:1,
            list: "해야할일1",
            isDone : false,
        },
        {
            id:2,
            list: "해야할일2",
            isDone : false,
        },
        {
            id:3,
            list: "해야할일3",
            isDone : false,
        },
    ])

로 입력되어 있다.
버튼 클릭으로 글을 더 늘리기 위해서는 해당글에 값을 추가시켜야하는데 id값으로 삭제 및 클릭효과를 줘야하기에 id값을 +1씩 더해줄 필요가 있어서 Ref를 사용한다.

import { useState, useRef } from 'react'; 선언
  const nextId = useRef(todos.length+1); 함수 설정

     // CreateTodo 컴포넌트에서 + 버튼 클릭시
    //todos배열에 할일 객체가 추가됨
  onCreate 함수
   const onCreate = () => {
      const listobj = {
        id : nextId.current,
        list:list,
        isDone: false,
      }
      setTodos([...todos,listobj]);
      nextId.current += 1;
      setList("");
    }

nextid에 함수의 길이 +1을해 3개가 입력되어 있을시 4가 들어가도록 설정해준다.
onCreate함수 실행시 id값에 nextid를 넣어주며, list값은 input에서 수정되었던 내용이 들어가있기에 list를 넣어준다.
inDone은 클릭이벤트를 위해 만들어놓았다.
그리고 set을 해용해 원레있던 내용값을 배열로 넣어주고 (...todos),위에서 값을 만들어두었던 listobj를 뒤에 추가해준다.

TodoLists.js
const TodoLists = ({todos, onDelete,onToggle}) => {
    return (
        <div className='fot'>
            {todos.map(todo=><TodoList onToggle={onToggle} onDelete={onDelete} todo={todo} key={todo.id}/>)}        
        </div>
    );
};

App에서 받아온 배열 todos를 이용해 map함수 이용,TodoList.js로 값을 넘겨주었다.

TodoList.js
const TodoList = ({ todo, onDelete,onToggle }) => {
    return (
        <>
            <p className={todo.isDone ? 'active' : ''} onClick={()=>{
                onToggle(todo.id) }}>
                    {todo.list}</p><button onClick={() => { onDelete(todo.id)}}> X</button>
        </>
    );
};

화면에 추가되는 내용들이 들어가있다. (반복되서 출력될 내용들)
우선 X 버튼을 누를시 각각의 값에 onDelete함수에 id값을 넣어서 돌려주도록 되어있다.

  //항목 삭제
    // 삭제 클릭시 id값을 인수로 받아서
    // todos배열에서 id값이 다른 객체만 업데이트
    const onDelete = (id) => {
      setTodos(todos.filter(todo=> id !== todo.id));
    }

id값을 받아와 필터로 처리해 setTodos에서의 해당 id값을 빼고 가져오도록 한다.

    // 클래스넣기
    // 해당글 클릭시 isDone가 false라면 true, true라면 false를 넣어준다.
    // 해당 태그에 삼항연산자를 사용해 클래스네임을 넣어준다.
    const onToggle = (id) => {
      setTodos(todos.map(todo=> id === todo.id ? {...todo, isDone: !todo.isDone} : todo))
    }

onToggle은 값을 받아와 id값을 서로 비교한 후 id값이 일치한다면 실행. true라면 false를 false라면 true를 넣어주고 id가 일치하지 않는다면 todo를 그대로 리턴한다.