Hook 사용예제: useTabs + 함수형 컴포넌트의 event 처리
Tab창 기능을 하는 커스텀 훅을 구현해보았다.
import React, {useState} from 'react';
const content = [
{
tab: "Section 1",
content: "I'm the content of the Section 1"
},
{
tab: "Section 2",
content: "I'm the content of the Section 2"
}
];
const useTabs = (initialTab, allTabs) => {
const [currentIndex, setCurrentIndex] = useState(initialTab);
if(!allTabs || !Array.isArray(allTabs)){
return;
}
return {
currentItem: allTabs[currentIndex],
changeItem: setCurrentIndex
}
}
const App = () => {
const { currentItem, changeItem } = useTabs(1, content);
return(
<div>
{content.map((section,index) => <button key={index} onClick={() => changeItem(index)}>{section.tab}</button>)}
<div>{currentItem.content}</div>
</div>
)
}
export default App;
객체를 return 했을 때 { currentItem, changeItem } = useTabs(1, content);
이것처럼 객체안의 값들을 바로 쓸 수 있는점이 편리한 것 같다.
함수형 컴포넌트의 event를 처리할 때 함수를 호출하는 경우
<button key={index} onClick={() => changeItem(index)}>{section.tab}</button>
<button key={index} onClick={function(){changeItem(index)}}>{section.tab}</button>
둘다 사용할 수 있지만 콜백함수가 더 간단하다. 위 방법처럼 사용해야 유저가 버튼을 클릭할 때만 changeItem함수가 호출된다.
만약 <button key={index} onClick={changeItem(index)}>{section.tab} </button>
이렇게 사용한다면 모든 렌더링 루프마다 changeItem함수가 호출된다. 따라서 무한 리렌더링을 발생시킬 수 있기 때문에 에러가 발생한다.
Author And Source
이 문제에 관하여(Hook 사용예제: useTabs + 함수형 컴포넌트의 event 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyunn/Hook-사용예제-useTabs저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)