React - onClick 파라미터 전달하기

시간이 생겨서 개인프로젝트인 Todo를 삭제 버튼을 구현했다.

리덕스를 사용한 프로젝트여서 특정 할 일을 삭제하려면 그 할일의 id 값을 action으로 보내야하는데, 그러면 파라미터로 id를 전달해야 했다.

하지만 지금까지 파라미터로 전달할 일이 없었기에 검색을 해야했고, React 공식문서에서 이벤트 처리하기를 발견했다.

구현한 코드는 다음과 같다.

// 완료 여부를 전달하는 함수
const handleClickDone = id => {
	dispatch(setDoneTodo(id));
}

// redux에게 id를 전달하는 함수
const handleDeleteTodo = (id, e) => {
  	// 이벤트 버블링 막기
  	e.stopPropagation();
	dispatch(setDeleteTodo(id));
}

// 
return (
  <>
  // ... 코드들
  	<totalTodo.map(({ id, content, done }) => {
      <div key={id} onClick={() => handleClickDone(id)}>
            // 다음 onClick 처럼 이벤트와 파라미터를 전달
          <button onClick={e => handleDeleteTodo(id, e)}>X</button>
        {content}
      </div>
    }
  // ... 코드들
  </>
);