[React] onClick 이벤트에서 화살표 함수를 사용해야 하는 이유

bin·2023년 1월 18일
0
import React, { useReducer } from "react";

function reducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return {count: state.count + 1};
        case 'DECREMENT':
            return {count: state.count - 1};
        default:
            throw new Error();
    }
}

const Counter = () => {
    const initialState = { count: 0 };
    const [state, dispatch] = useReducer(reducer, initialState); 

    return (
        <>
      		{/* 화살표 함수 */}
            <button onClick={() => dispatch({type: 'DECREMENT'})}>-</button>
            <button onClick={() => dispatch({type: 'INCREMENT'})}>+</button>
        </>
    )
}

export default Counter;

위 코드에서 onClick 이벤트에 화살표 함수를 사용하지 않고, 함수를 바로 호출하였을 때 제대로 렌더링 되지 않고, 콘솔창에 메모리 누수 관련 에러 로그가 찍혀있었다.

React 공식문서에 의하면 다음과 같이 함수를 호출하도록 명시되어 있다.

Why is my function being called every time the component renders?
Make sure you aren’t calling the function when you pass it to the component:

render() {
  // Wrong: handleClick is called instead of passed as a reference!
  return <button onClick={this.handleClick()}>Click Me</button>
}

Instead, pass the function itself (without parens):

render() {
  // Correct: handleClick is passed as a reference!
  return <button onClick={this.handleClick}>Click Me</button>
}

즉, onClick 이벤트에 함수를 바로 호출할 경우, onClick 이벤트와 무관하게 컴포넌트가 리렌더링 될 때마다 함수가 호출될 수 있다.

실제로 그러한 지 테스트해보자.

import React, { useState } from "react";

const renderTest = () => {
    console.log('onClick과 무관하게 리렌더링 될 때마다 이벤트가 발생하는지 test합니다.');
}

const Test = () => {
    const [count, setCount] = useState(0);

    return (
        <>
            <button onClick={() => {setCount(count + 1)}}>INCREMENT</button> count : {count}
            <br />
            <button onClick={renderTest()}>TEST</button> 
        </>
    )
}

export default Test;

콘솔에 찍힌 로그는 TEST 버튼을 클릭해서 찍힌 것이 아니다. 최초 렌더링 시 한 번, 그리고 상태를 update 하는 INCREMENT 버튼을 클릭하여 리렌더링 될 때마다 찍힌 것이다.

onClick 이벤트 발생 시에만 함수가 호출되길 원한다면 다음처럼 작성하면 된다.

  • 매개변수가 필요한 함수는 화살표 함수로 매개변수를 전달하여 작성
  • 매개변수가 필요없는 함수는 화살표 함수 또는 괄호를 제외한 함수명만 작성

코드로 나타내면 다음과 같다.

{/* onClick 이벤트가 발생할 때만 호출된다. */}
<button onClick={() => renderTest()}>TEST</button>
<button onClick={renderTest}>TEST</button> 

0개의 댓글