2024.08.14

삭제 기능 구현 중

선택된 국가명과 기존에 있는 국가명과 비교하도록 해야 하는데 c를 찾지 못해, 접근이 막혔습니다.

오 오타다 delete

 

해당 문제는 `deleteHandler`함수에서 `c`를 잘못 사용하고 있기 때문!

 

`deleteHandler` 함수는 `c`를 매개변수로 받아야 하지만, `onClick`이벤트 핸들러에서 `c`를 전달하지 않고 있습니다.

올바르게 전달하려면, 함수를 호출할 때 `c`를 인자로 전달해야 합니다.

 

 

<button onClick={deletHandler(c)}>삭제</button>

 

버튼 클릭 시에만 `deleteHandler` 함수가 실행 되어야 하지만,

이 코드는 `deleteHandler(c)`를 즉시 호출하게 돼, 버튼이 렌더링되는 시점에 `deleteHandler` 함수가 실행됩니다.

 

 

<button onClick={() => deletHandler(c)}>삭제</button>

화살표 함수를 사용하여 `deleteHandler(c)`를 호출합니다.

즉, 클릭 이벤트가 발생했을 때 화살표 함수가 실행되고 그 안에서 `deleteHandler (c)`함수가 실행되도록 합니다

 

 

 

왜 화살표 함수가 필요한가?

 

매개변수 전달

: `deleteHandler`는 삭제할 국가 객체 `c`를 매개변수로 필요로 합니다. 이벤트 핸들러로 함수 자체를 전달하면 매개변수를 전달할 수 없지만, 화살표 함수는 매개변수를 전달하면서 이벤트 핸들러를 설정할 수 있습니다.

 

지연 실행

: 이벤트 핸들러에 전달된 화살표 함수는 이벤트가 발생할 때까지 실행되지 않습니다. 즉 `deleteHandler(c)`가 직접 호출되는 것이 아니라, 버튼 클릭 시에만 호출됩니다.