[JS] onClick 함수 - 파라미터 전달하기

콜백함수에 인자를 넘겨주냐 / 넘겨주지 않느냐에 따라 onClick 이벤트 함수 작성법이 달라진다.

① 아무런 인자도 넘겨주지 않을 때 

return (
	<button onClick={()=>{alert("Hello")}}> CLICK </button>
)

간단한 함수라면 이벤트에 바로 작성해주거나

const onClick=()=>{alert("Hello")};

return (
	<button onClick={onClick} /> CLICK </button>
)

함수 내용이 조금 복잡하다면, 바깥에 따로 선언해주고 onClick 이벤트에서 호출만 해주면 된다

 

② 파라미터를 넘길 때 

onClick 이벤트를 통해 함수에 파라미터 값을 넘겨주려면, 아래처럼 화살표 함수를 이용하면 된다

const onClick=(params)=>{
	console.log(params);
};

return (
	<button onClick={()=>{onClick(params)}} /> CLICK </button>
)

 

이벤트 객체와 파라미터 둘 다 넘겨주고 싶다면

const onClick=(params,e)=>{
	console.log(params);
};

return (
	<button onClick={()=>{onClick(params,e)}} /> CLICK </button>
)

위와 같이 이벤트 객체도 같이 넘겨주면 된다

 

* 이벤트 객체만 넘겨주고 싶다면

const onClick=(e)=>{
	console.log("hELLO");
};

return (
	<button onClick={(e)=>{onClick(e)}} /> CLICK </button>
)

이렇게 작성해도 되지만

const onClick=(e)=>{
	console.log("hELLO");
};

return (
	<button onClick={onClick} /> CLICK </button>
)

파라미터를 넘겨주지 않는 것 처럼 이렇게 간단히 작성해도 상관 없다

 

주의해야될 점은 onClick 이벤트를 통해 함수에 값을 넘겨줄 때 무작정 인자를 넘겨주는 것이 아니라 화살표 함수를 이용해야한다는 것이다