[React] UseState 탭메뉴 구현

강수정·2024년 1월 25일

최종 목표

탭메뉴를 구성하여 클릭 시 탭메뉴 색상 변경 및
해당 컨텐츠로 스크롤 이동되게 만들기

시행착오

map 함수를 이용하여 button, content 레이아웃을 잡고
useState를 이용하여 탭메뉴 색상 변경과 자동스크롤을 구현하고자 했다.

데이터구조

탭메뉴 선택 색상변경

탭메뉴 상태관리함수를 생성하여 기본선택값으로 tab01을 설정해두었다.
삼항연산자를 이용하여 스타일 속성에서
activeTab = tab.id 해당아이디에 해당하는 탭을 선택했다면(?)
앞의값(#ccc)을 보여주고, 선택되지않은 탭은 뒤의값(#fff)를 보여준다.

삼항연산자란?

조건문이 참일때 true의 결과값이 실행되고
조건문이 거짓일때 false의 결과값이 실행된다.

조건문 ? true : false

const [activeTab, setActiveTab] = useState('tab01');

<div className="tab-title">
	{tabContent.map((tabs)=>(
  	<button 
      key={tabs.id}
      style={
      backgroundcolor: activeTab === tabs.id ? `#ccc` : `#fff`,
      color: activeTab === tab.id ? '#000' : '#333',
      }
      >
      <span>{tabs.title}</span>
      </button>
  ))}
</div>

각 탭메뉴 선택시 해당 컨텐츠 내용으로 스크롤

컨텐츠 스크롤 핸들러 생성한다 handleTabClick
tabId를 받아와 setActiveTab을 호출하여 activeTab의 상태를 업데이트 한다.
변수 element를 만들어서 주어진 tabId를 가진 html 요소를 할당해준다.
변수 element가 존재한다면 해당 하는곳으로 이동한다.
handleTabClick 핸들러함수에 해당 id부여하고 onclick 등록

  <div className="tab-title">
  	{tabContent.map((tabs)=>(
    	<button 
        key={tabs.id}
        style={{}}
        onClick={() => handleTabClick(tabs.id)}
        >
        <span>{tabs.title}</span>
        </button>
    ))}
  </div>

+추가할것(240125)

🔎 content에 <컴포넌트명 /> 넣어서 유지보수성 높이기

상품후기,상품문의,상세정보 등등 컨텐츠의 내용이 방대해지기 때문에
컴포넌트를 쪼개서 불러오는 형식으로 진행하기로 했다.
배송사항, 안내사항은 공통 컨텐츠 이므로 따로 분리할 필요없이 이어서 작성하고 content의 내용이 string 비어있을 경우 <component />를 불러오는 로직을 구성하였다.

방법은 간단한다

typeo 으로 content의 내용이 문자열인지 확인 한뒤
문자열인경우 그대로 content의 내용을 렌더링 한다.
문자열이 아닌경우 React.Fragma으로 content을 한번 더 감싼뒤 렌더링한다.
그결과 각 탭의 내용이 문자열이든 컴포넌트든 처리가 가능하다.

typeo란?

피연산자의 데이터 타입을 문자열로 반환한다.

 {typeof tabs.content === 'string' ? (
                           tabs.content
                       ) : (
                           <React.Fragment key={tabs.id}>{tabs.content}</React.Fragment>
                       )}