매개변수 자리에 들어오는 값을 콘솔로 출력하면 undefined인 이유

const toggleCompleted = (id, text, completed) => {
    alert("실행 잘되구있오");
  };

 

이렇게 함수를 선언하고

html 부분의 완료 버튼에

 

<button onClick={() => toggleCompleted(todo.id)}>완료</button>

 

이렇게 함수를 선언해줬다.

 

클릭한 값들도 잘 들어오고 있나 싶어서

얼럿 코드 위에

콘솔을 이용해서 값을 출력했는데

모두 undefined가 찍혔다....

 

튜터님께 여쭤봤는데

이벤트 핸들러 (여기에서는 onClick)에

그냥 함수(여기에서는 toggleCompleted)를

넘겨주게 되면

매개변수로 이벤트를 가져올 수 있기 때문에

undefined가 뜬다고 하셨다.

 

 

  const handleInputChange = (event) => {

    setNewTodo(event.target.value);

  };

얘랑

const handleSubmit = (event) => {

    event.preventDefault();

    setTodos([{ id: crypto.randomUUID(), text: newTodo }, ...todoList]);

    if (newTodo.trim().length === 0) {

      return;

    }

    setNewTodo("");

  };

얘도 

 <form onSubmit={handleSubmit}>

        <input

          type="text"

          placeholder="todoList 입력"

          onChange={handleInputChange}

          value={newTodo}

        ></input>

        <button type="submit">입력</button>

      </form>

이렇게 바로 넘겨줬는데

모두 event를 (매개변수로) 넘겨준 것 이기 때문에

undefined가 뜰 수 밖에 없는 것이다.