React hooks로 Tab 기능 구현
React hooks로 탭 기능을 어떻게 구현할까.
아래 그림처럼 상단에 탭타이틀이 있고, 하단에 탭 콘텐츠가 있으며, 각 탭 타이틀을 클릭할 경우 해당 컨텐츠가 보이도록 할 것이다.
1 ) 탭타이틀을 클릭하면 해당 타이틀에 'is-active'라는 class를 부여해서 포커싱된 탭에 맞는 스타일을 부여할 것이고,
2 ) 각 탭을 클릭하면 만 화면에 보여지도록 할 것이다.
먼저 (1) 탭 Title, (2) 탭 Content를 담은 배열을 선언한다.
const tabContArr=[
{
tabTitle:(
<li> 탭1 </li>
),
tabCont:(
<div> 탭1 내용 </div>
)
},
{
tabTitle:(
<li> 탭2 </li>
),
tabCont:(
<div> 탭2 내용 </div>
)
}
];return되는 템플릿에 map 함수를 사용해서 각 obj의 탭 Title이 작성되도록 한다.
return (
<ul className="tabs is-boxed">
{tabContArr.map((section, index)=>{
return section.tabTitle
})}
</ul>
);(위와 같이 각 tabContArr obj의 tabTitle을 return한다.)
이 때 각 탭 Title을 클릭하면 => 해당 태그의 index 값이 useState에 저장되도록 한다.
[ active한 index값을 관리하는 State ] 를 먼저 선언한다.
const [activeIndex, setActiveIndex] = useState(0);
// initialState에 원하는 index값을 입력하면 된다.
// 초기 화면에 0번째 탭이 active되길 원한다면 0값을 입력한다.이제 탭타이틀을 클릭하면 해당 탭의 index값을 activeIndex State로 셋팅하는 함수를 생성한다.
앞서 작성했던 tabContArr 배열 내에서 작성해줄 것이다.
앞서 작성했던 tabContArr 배열 내에서 작성해줄 것이다.
const [activeIndex, setActiveIndex] = useState(0);
const tabContArr=[
{
tabTitle:(
<li onClick={()=>tabClickHandler(0)}> 탭1 </li>
),
tabCont:(
<div>탭1 내용</div>
)
},
{
tabTitle:(
<li onClick={()=>tabClickHandler(1)}> 탭2 </li>
),
tabCont:(
<div>탭2 내용</div>
)
}
];
const tabClickHandler=(index)=>{
setActiveIndex(index)
}tabContArr 배열 중에 activeIndex에 해당하는 tabCont를 ul태그 (탭 Title) 아래에서 보여줄 것이다.
return (
<ul className="tabs is-boxed">
{tabContArr.map((section, index)=>{
return section.tabTitle
})}
</ul>
// activeIndex의 탭콘트만 보여줌!
<div>
{ tabContArr[activeIndex].tabCont }
</div>
);이제 탭타이틀을 클릭하면 해당 탭콘텐츠만 보일것이다!
마지막으로 클릭한 탭타이틀에 'is-active' class를 부여할 것이다.
[ activeIndex가 각 탭타이틀의 index와 일치하면 ] ====>>> 'is-active' 클래스를 부여하도록 할 것이다.
const tabCont=[
{
tabTitle:(
<li className={activeIndex===0 ? "is-active" : ""} onClick={()=>tabClickHandler(0)}>
탭1
</li>
),
tabCont:(
<div>탭1 내용</div>
)
},
{
tabTitle:(
<li className={activeIndex===1 ? "is-active" : ""} onClick={()=>tabClickHandler(1)}>
탭2
</li>
),
tabCont:(
<div>탭2 내용</div>
)
}
];아래는 소스 전문
import React, {useState} from 'react';
export default function Orgchart() {
const [activeIndex, setActiveIndex]=useState(0);
const tabClickHandler=(index)=>{
setActiveIndex(index);
};
const tabContArr=[
{
tabTitle:(
<li className={activeIndex===0 ? "is-active" : ""} onClick={()=>tabClickHandler(0)}> 탭1 </li>
),
tabCont:(
<div> 탭1 내용 </div>
)
},
{
tabTitle:(
<li className={activeIndex===1 ? "is-active" : ""} onClick={()=>tabClickHandler(1)}> 탭2 </li>
),
tabCont:(
<div> 탭2 내용 </div>
)
}
];
return (
<div>
<ul className="tabs is-boxed">
{tabContArr.map((section, index)=>{
return section.tabTitle
})}
</ul>
<div>
{tabContArr[activeIndex].tabCont}
</div>
</div>
);}
tab구현에 대한 궁금증이 있고 공부하고 싶은 마음은 있었지만
다른것들이 우선이기에 미루던것을 찾아봐 공부하였다.
(기본적인 로그인 CRUD같은것들이 우선이기에)
프로젝트에 적용한것은 아니지만 tab기능을 공부하고 써보며
이해하는 시간을 가졌다. 정말 크게 어려움은 없었다.
확실히 기본적인 코드 작성법을 알게 되면 어떤 기능구현 코드를보면
아~ 이래서 이렇게 작성하는구나를 알게되는거같다.
머 사실 내가 코드작성이 완벽하게 되있다는것은 아니다.
하지만 공부를 하면할수록 확실히 어제의 나보단 좋아지는거같다.
얼마 전부터 같이 프로젝트를 진행하는 분중 한분이
코드 작성을 잘못한다고 뒤에서 이야기하는것을 들었는데
딱히 내가 반박을 할수없었다...( 못하는건 사실이였으니깐..)
하지만 기분은 좋지않았다... 사실 여긴 공부하러오는곳이니깐..
못하는게 당연한거아닌가? 그것을 개선하는곳인건데...
머 그분 마음도 이해한다 프로젝트하는데 로직을 작성을 잘 못하니
본인에게 도움이 많이 안되서 부담이 됬겠지...
벼는 익을수록 고개를 숙인다고하는데
그분은 아직 좋은 개발자가 아닌거 같다.(물론 나보단 잘하지만)
머 결국 내가 못해서 이런 일이 일어나는건데 더 이상 할말이 없다.
내가 잘해지면된다. 견디고 꾸준히 하면서 내 실력을 키우자
그럼 된다. 잘하는 사람의 방법과 코드를 다 빼먹자
견디고 꾸준히 하다보면 어느 순간 내가 그분보다 더 잘할수있을꺼라고 믿는다.
나름 동기 부여가 된거같다 오히려...
힘내자 할수있다.
나를 지켜봐주고 도와주는 사람들을 위해서 아니 나를 위해서라도
열심히하자
