🟦 [React] onclick={함수()}, onclick={() => 함수()} 차이점

onclick={함수()} 와 onclick={() => 함수()} 의 쓰임새

=> 사실 차이를 잘 몰라서 뭐가 다른 건지 몰랐는데 혼자 해보니 만들어 보니 알게 됨❗

 

onclick={함수()}	onclick={() => 함수()}
렌더링 될 때 실행해버림 (즉시 실행)	click할 때만 함수를 실행

 

 

✅구현하려고 하는 동작: 탭을 누르면 내가 누른 탭의 index를 받아온다.

 

내가 했던 방법 👇  => onclick={ handleTabClick(index) }

import { useState } from "react";
import { tabName, tabData } from "../data/tabData";

export default function TabComponent(){
    const [activeTab, setActiveTab] = useState(0) // 현재 선택된 탭의 index

    const handleTabClick = (index) => {
        setActiveTab(index);
        console.log(index);
    }

    return(
        <>
            test
            <ul className="tab-list">
                {
                    tabName.map((tab, index) => (
                        <li
                            key={index}
                            className={activeTab === index ? "active" : ""}
                        ><button onClick={handleTabClick(index)}>{tab}</button></li>
                    ))
                }
            </ul>
            <div className="tab-con-list">
                <div className="tab-con"></div>
            </div>
        </>
    )
}

 

🚫 오류 내용

 

 

 

=> 리렌더링이 너무 많이 되고 있다는 오류!

=> index가 찍히긴 하지만 내가 누르지 않을 때도 계속 찍히고 있음

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

올바른 방법 👇  => onclick={ () => handleTabClick(index) }

import { useState } from "react";
import { tabName, tabData } from "../data/tabData";

export default function TabComponent(){
    const [activeTab, setActiveTab] = useState(0) // 현재 선택된 탭의 index

    const handleTabClick = (index) => {
        setActiveTab(index);
        console.log(index);
    }

    return(
        <>
            test
            <ul className="tab-list">
                {
                    tabName.map((tab, index) => (
                        <li
                            key={index}
                            className={activeTab === index ? "active" : ""}
                        ><button onClick={() => handleTabClick(index)}>{tab}</button></li>
                    ))
                }
            </ul>
            <div className="tab-con-list">
                <div className="tab-con"></div>
            </div>
        </>
    )
}