-
onClick으로 전달되는 함수형태에 따른 차이React/React 2023. 2. 1. 02:34
📌 첫번째 방식이 show 라는 함수를 재사용할 수 있기 때문에 좋은 방식이다.
📌 두번째 방식은 button 이 렌더링 되면서 show라는 함수가 실행(show())되어버린다.
📌 세번째 방식은 ()=>{} 익명함수에 넣어쓰는 방식인데 {} 중괄호 안에 코드가 한두줄일때 가볍게 넣는다.
그러나 jsx안에 넣는 방식은 코드의 재사용이 힘들어지기 때문에 그리 추천하지 않는다.
🔥 결론 첫번째 방식으로 하자!
const Buttons = () => { let num = 0 const show = () => { console.log(`show ${num}`); ++num }; return <> // 1. 첫번째 방식 <button onClick={show}>show</button> //클릭시 num 이 1씩 증가하면서 출력된다 // show 0 // show 1 // show 2 // 2. 두번째 방식 <button onClick={show()}>show()</button> // 출력결과 - onload 되는순간 show 0 이 한 6번정도 출력된 후 멈춘다. 왜그럴까? // show 0 // show 0 // show 0 // show 0 // show 0 // show 0 // 3. 세번째 방식 <button onClick={() => show()}>()=>show()</button> //클릭시 num 이 1씩 증가하면서 출력된다 // show 0 // show 1 // show 2 </> }
'React > React' 카테고리의 다른 글
React 기본 css 제거하기 (0) 2023.02.25 React useParams() 사용법 (0) 2023.02.23 React Router 버전 5 , 6 문제 해결 및 차이점 (react-router-dom) (0) 2023.02.23 useEffect 에서 return 문을 왜 쓰이는걸까? (0) 2023.02.14 React 조건에 따라 component 렌더링 시 가독성 좋은 두 가지 방법 (0) 2023.02.07