인프런 커뮤니티 질문&답변

TailwindCss 적용하기 실습 중 발생한 문제입니다.

setValue is not a function TypeError: setValue is not a function at handleChange (http://localhost:3000/static/js/bundle.js:167:5) at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:11038:18) at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:11082:20) at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:11139:35) at invokeGuardedCallbackAndCatchFirstError (http://localhost:3000/static/js/bundle.js:11153:29) at executeDispatch (http://localhost:3000/static/js/bundle.js:15297:7) at processDispatchQueueItemsInOrder (http://localhost:3000/static/js/bundle.js:15323:11) at processDispatchQueue (http://localhost:3000/static/js/bundle.js:15334:9) at dispatchEventsForPlugins (http://localhost:3000/static/js/bundle.js:15343:7) at http://localhost:3000/static/js/bundle.js:15503:16

이러한 오류가 발생하였습니다.

아래는 코드입니다.

지난 시간에서 딱히 바꾼게 없는데 오류의 원인을 잘 모르겠어서 질문드립니다.

App.js

import React, {useState} from "react"; import "./App.css"; import List from "./components/List"; import Form from "./components/Form" export default function App (){ const [todoData, setTodoData] = useState([]); const [value,setValue] = useState(""); const handleSubmit = (e) =>{ e.preventDefault(); // 전송시 페이지 새로고침 방지 함수 let newTodo = { id : Date.now(), title: value, completed : false }; // 새로운 할 일 데이터의 형성 setTodoData(prev => [...prev,newTodo] ) setValue("") // 원래 할 일에 새로운 할 일 데이터의 update 해주는 setState 함수 } const btnStyle = { color: "#fff", border: "none", padding : "5px 9px", borderRadius: "50%", cursor: "pointer", float:"right" } return( <div className="container"> <div className='todoBlock'> <div className="title"> <h1>To do list</h1> </div> <h1 className='text-3xl font-bold underline'>Hello world!</h1> <List todoData= {todoData} setTodoData = {setTodoData}/> <Form handleSubmit = {handleSubmit} value ={value} setValue = {setValue}/> </div> </div> ); }

list.js

import React from 'react'

export default function List({todoData , setTodoData}) {

  const btnStyle = {
    color: "#fff",
    border: "none",
    padding : "5px 9px",
    borderRadius: "50%",
    cursor: "pointer",
    float:"right"
  } 
  const handleClick = (id) => {
    let newTodoData = todoData.filter(data => data.id !== id)
    console.log('newTodoData',newTodoData);
    setTodoData(newTodoData);
  }
  const getStyle = (completed) => {
    return {
      padding : "10px",
      borderBottom: "1px #ccc solid",
      textDecoration: completed ? 'line-through' : 'none',
    }
  }
  const handleCompleteChange = (id) => {
    let newTodoData = todoData.map(data => {
      if (data.id === id){
        data.completed = !data.completed;
      }
      return data;
    });
    setTodoData(newTodoData);
  };
  return (

    <div>
         {todoData.map((data)=>(
            <div style = {getStyle(data.completed)} key = {data.id}> 
              <input type = "checkbox" defaultChecked = {false} onChange = {() => handleCompleteChange(data.id)}/>
              {data.title}
              <button style = {btnStyle} onClick = {() => handleClick(data.id)}>X</button>
              </div>
          ))}
    </div>
  )
}

form.js

import React from 'react'

export default function Form(handleSubmit,value,setValue) {
    const handleChange = (e) =>{

        setValue(e.target.value); 
      }

  return (
    <form style = {{display:"flex"}} onSubmit = {handleSubmit}>
    <input type = "text" name = "value" style = {{flex: '10', padding :'5px'}}
    placeholder = "해야 할 일을 입력하세요." value ={value}
    onChange ={handleChange}
    />

    <input type = "submit"
    value = "입력"
    className="btn"
    style ={{flex:'1'}} 
    />


  </form>
  )
}