Onclick Event 로 걸어두었는데 Rendering 시 실행되는 케이스

예를 들어.. 아래와 같은 코드를 작성했다고 해보자.

module.exports = React.createClass({
    render: function(){
        var taskNodes = this.props.todoTasks.map(function(todo){
            return (
                <div>
                    {todo.task}
                    <button type="submit" onClick={this.props.removeTaskFunction(todo)}>Submit</button>
                </div>
            );
        }, this);
        return (
            <div className="todo-task-list">
                {taskNodes}
            </div>
        );
    }
});

onclick event 로 map 함수에 표시된 어떤 것들을 삭제하는 기능을 하는 function 을 구현한다.

이때 delete 기능은 버튼 클릭 시에만 발생하여야 한다. 근데 해당 function 안에서 console을 찍어보면

화면이 렌더링 될 때 function 안의 console 이 찍히는 것을 볼 수 있을 것이다.

 

이벤트 함수에 파라미터 값을 넣을 경우에는 문법을 신경 써주어야 한다.

 

잘못 사용된 형태의 코드

onClick={this.function(param)}

정상 동작하는 코드 

onClick={()=> this.function(param)}