React TodoList 만들기

* style 컴포넌트:  tailwindcss 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

 

🔷[App.js]

//App.js

function App() {
  const [value, setValue] = useState('')
  const [todoData, setTodoData] = useState([])

  const handleSubmit = (e) => {
    e.preventDefault()

    // 새로운 할 일 데이터
    const newTodo = {
      id: Date.now(), //현재 date값
      title: value, //this.state.value
      completed: false //
    }
    setTodoData((prev) => [...prev, newTodo])
    setValue(" ")
  }
  return (
    <div className="App">
      <div className="w-screen h-screen bg-blue-100 fixed">
        <div className="w-3/4 mx-auto p-10 mt-10 bg-white">
          <div className="bg-white-100">
            <h1 className="font-bold text-3xl">TODO List</h1>

            <TodoList todoData={todoData} setTodoData={setTodoData} />
            <FormData value={value} setValue={setValue} handleSubmit={handleSubmit} />

          </div>
        </div>
      </div>
    </div>
  );
}

 

🔸[TodoList 컴포넌트]

• todoData={todoData}
  • useState인 todoData를 props로 보냄
  • props로 받은 todoData는 컴포넌트내에서 map함수를 이용해서 list가 출력된다.
• setTodoData={setTodoData}
  - 해당 리스트 삭제를 위해서 todoData가 filter된 data를 useState 시킨다.

🔸[FormData 컴포넌트]

• value={value}
  • 화면에 표시될 내용을 value 출력
• setValue={setValue}
  • 입력되는 내용, 렌더링 후 빈 내용으로 변경
• handleSubmit={handleSubmit}
  • onSubmit시 setValue된 입력 된 새로운 할일 데이터가 생성된다.
  • 해당 데이터의 id, title, completed값으로 새로운 객체를 생성 -> 해당 데이터를 setTodoData의 값으로 넣는다.

---

🔷 [Form 컴포넌트 내부]

• props : value, setValue, handleSubmit
• 해당 이벤트는 타이핑된 값을 value로 받아온다.

//form.jsx
import React from 'react'

export default function formData({ value, setValue, handleSubmit }) {
    const handleChange = (e) => {
        setValue(e.target.value)
        // console.log(e.target.value)
    }
    return (
        // onSubmit이벤트 발생시 handleSubmit 함수 실행
        <form onSubmit={handleSubmit} className="addBtn">
            <input
                type="text"
                name="value"
                value={value}
                placeholder="할 일을 입력하세요"
                onChange={handleChange}
                className="w-full px-3 py-2 text-gray-500 border rounded shadow"

            // 타이핑하면 onChange event가 발생한다. 
            // 해당 이벤트 안에서 value는 입력이 가능하도록 state로 만듬 
            />
            <button
                type="submit"
                value="입력"
                className="p-2 text-blue-400 border-2 border-blue-400 rounded hover:text-white hover:gt-blue-200"
            >입력</button>
        </form>
    )
}

 

🔸[onChange={handleChange}]

• onChage함수는 타이핑시에 event가 발생한다.
• handleChange 함수안에는 입력되는 value로 상태값을 바꿔준다.

🔸[onSubmit={handleSubmit}]

• submit이 되면 해당 함수가 실행된다.
• handleSubmit을 props로 내려받는다.
• handleSubmit 함수는 다른 state값도 갖고 있기때문에 부모 컴포넌트에 위치시킨다.

---

🔷 [List 컴포넌트 내부]

• props : { todoData, setTodoData }

//List.jsx
import { data } from 'autoprefixer'
import React from 'react'

export default function TodoList({ todoData, setTodoData }) {
    const handleClick = (id) => {
        let newTododata = todoData.filter((data) => data.id !== id)
        setTodoData(newTododata)
    }
    const handleCompleChange = (id) => {
        let newTododata = todoData.map((data) => {
            if (data.id === id) {
                data.completed = !data.completed
            }
            return data
        })
        setTodoData(newTododata)
        console.log(newTododata)
    }

    return (
        <div className="mt-5">
            <div>
                {
                    todoData.map((data) => (
                        <div
                            key={data.id}
                            style={data.completed ? { textDecoration: 'line-through' } : { textDecoration: 'none' }}
                            className="flex items-center justify-between h-10">
                            <div>
                                <input
                                    type="checkbox"
                                    defaultChecked={data.completed}
                                    onChange={() => handleCompleChange(data.id)}
                                //onChange는 input 안의 값이 변경될 때에 발생 / 현재 태그에서 (check하면 onChange실행)
                                // checked가 true이면 파란라인이 그어질 수 있도록
                                />{"     "}
                                {data.title}
                            </div>
                            <div>
                                <button type="button"
                                    onClick={() => handleClick(data.id)}
                                >x</button>
                            </div>
                        </div>
                    ))
                }
            </div>
        </div >
    )
}

🔸[todoData.map((data)]

• props로 받아온(form에서 입력한) todoData를 map을 이용해서 출력한다.
• 해당 리스트는 고유의 id값을 갖는다. (리스트 제거와 line-thought시 사용)

<input 
type="checkbox"
defaultChecked={data.completed}
onChange={() => handleCompleChange(data.id)} />

• checkbox 타입
• defaultChecked값은 false이다.
• onChange는 input 안의 값이 변경될 때에 실행된다. (현재 태그에서check하면 onChange실행된다. )

🔸[onChange={() => handleCompleChange(data.id)}]

• 클릭된 대상의 id값을 파라미터로 전달한다.
• handleCompleChange 함수의 역할은 리스트의 체크값에 따른 style변화이다.
  • 클릭된 target의 id값과 todoData의 id값이 같다면 completed값을 변화시킨다.
  • completed가 true가 된다면 체크와 함께 밑줄이 그어지도록 만든다.

🔸[onClick={() => handleClick(data.id)}]

• id값이 동일한 data는 지워줄 수 있도록 filter시킨다.
• 새로운 변수에 filter된 data list를 만들고 상태값을 변화시킨다.