오랜만에 과거에 리액트 공부할때 만들어둔 폴더를 보던중에 해당 에러가 발생해서 코드를 찾아보니
onClick 이벤트에 콜백이 아닌 그냥 상태변경메소드를 사용하고 있던걸 발견한김에 onClick(onClick외에도 적용) 에서 콜백을 사용하는 경우와 아닌 경우를 알아보겠습니다.
<button onClick={setCount((count) => count + 1)}>
count is {count}
</button>-- 에러 발생 콘솔과 코드 --
1. callback을 작성하지 않은 경우
const hello = () => {
console.log("hello");
};
<button onClick={hello()}>event</button>1-1. 간단한 함수가 있고 해당 이벤트를 실행시키는 버튼이있습니다.
이렇게 onClick에 콜백없이 함수( )를 사용하면 초기에 렌더링될때 해당 함수가 실행되고 버튼을 눌러도 실행되지않습니다
<button onClick={hello}>event</button>
1-2. 다음과 같이 ( )를 빼고 작성하면 해당 버튼에서 원하던 기능이 수행됩니다.
hello( ) 와 hello의 차이점
hello( )는 hello라는 함수가 반환하는 결과값을 onClick에 넘겨주는 역할을 하기때문에 초기 렌더링시 한번 실행되고 실행되지않음.
hello는 hello함수 자체를 onClick에 넘겨주는 역할을 하기때문에 클릭할때마다 원하는 함수를 실행할수있음.
<button onClick={setCount((count) => count + 1)}>
count is {count}
</button>1-3. 매개변수를 사용하는 상태변환함수를 콜백을 작성하지 않고 실행시키면 함수가 무한루프로 실행되기때문에 위에서 보여드린 렌더링 에러가 뜹니다
2. callback을 작성하는 경우
callback = 다른 함수를 파라미터로 받아서 내부에서 해당 함수를 호출하는것을 뜻함
<button onClick={() => hello}>event</button>2-1. callback과 ()를 제외한 함수를 입력한 경우 당연히 아무 동작도 실행되지않습니다
<button onClick={() => hello()}>event</button>
2-2. callback에 함수를 정상적으로 작성한 경우 원하는 동작이 실행됩니다.
const hello = (comment) => {
console.log("hello");
console.log(comment);
};
<button onClick={() => hello("hi!")}>event</button>
2-3. 매개변수를 넘겨줘야 하는 경우 콜백에 함수를 작성해야
onClick 내에서 콜백을 사용하고 싶지않으면 다음과 같이 따로 함수를 만들어서 사용하면 됩니다
const handleCount = () => {
setCount(count + 1);
};
<button onClick={handleCount}>count is {count}</button>
즉 매개변수가 필요치 않고 콜백을 사용하지 않으면 괄호를 작성하지 않고 함수를 실행시키고 콜백을 사용하면 괄호를 작성해야 정상적으로 함수가 실행됩니다
