[React] onClick 함수로 파라미터를 전달하기

게코젤리·2023년 2월 18일
0

onClick함수에 콜백함수를 작성할 때 헷갈리는 부분이어서 정리해봤다.

1. 인자 없이 콜백 함수만

function App(){
	const handler = () => console.log('hi');
  	return(
    	<button onClick={handler}/>
    )
}

2. 콜백 함수에 (이벤트 객체가 아닌)인자를 넘길 때

호출이 아니라 선언해야한다.
handler() --> 호출
() => handler(a) --> 익명함수 선언

function App(){
	const handler = (name) => console.log(`hi ${name}`);
  	return(
    	<button onClick={() => handler('hong')}/>
      
    )
}

3. 콜백 함수에 이벤트 객체를 넘길 때

function App(){
	const handler = (e) => console.log(e.target.value);
  	return(
    	<button value={'hi'} onClick={(e) => handler(e)}/>
      	<button value={'hi'} onClick={handler}/>
    )
}

0개의 댓글