이벤트 핸들러 인자 전달 오류

아이템 클릭 시 항상 마지막 아이템의 id만 출력됩니다. 버그를 찾으세요:

JSX

function ItemList() {
  const items = [{id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'}];

  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => handleClick(item.id)}>
          {item.name}
        </li>
      ))}
    </ul>
  );

  function handleClick(id) {
    console.log('클릭된 아이템:', id);
  }
}

답변

map의 콜백에서 onClick을 바인딩할 수 없음 handleClick을 return 뒤에 선언하면 호이스팅이 안 됨 onClick에 화살표 함수를 쓰면 성능 문제가 발생함 코드에 실제 버그가 없음 - 화살표 함수로 클로저가 올바르게 생성됨

로그인 후 제출하기