관련된 것 끼리 묶어서 보여주기 (useState 사용)

어떤 버튼을 눌렀을 때 관련된 내용만 보여주고 싶을 때 useState()를 사용하면 쉽게 구현할 수 있습니다.

 

📌 useState()가 무엇이고 언제 사용하는가?

1. 자료를 저장하는 역할을 합니다.
2. 자주 변경되는 자료를 저장할 때 사용합니다.

 

 

📌 코드 설명

- 탭을 눌렀을 때 state가 변경되고, 변경된 state를 페이지를 출력하는 컴포넌트에 전달해서 관련된 내용만 보이도록 했습니다.

import { useState } from 'react';
// Detail에 관련된 자료가 저장된 파일입니다.
import {food, product, book} from 'Detail-data';

function Detail() {
  let[tab, setTab] = useState('food');
  
  return(
    <div>
    
      // 해당 버튼을 누를 때마다 onClick() 함수가 활성화돼서 state 값을 변경해줍니다.
      <header className="tab-container">
        <button type="button" onClick={() => {setTab('food')}}>
          <h1>식재료</h1>
        </button>
        <button type="button" onClick={() => { setTab('product'); }}>
          <h1>식기 및 도구</h1>
        </button>
        <button type="button" onClick={() => { setTab('book'); }}>
          <h1>관련도서</h1>
        </button>
      </header>
      
      <section className="grid">
        {
          <ClickTab tab={tab} food={food} product={product} book={book} />
        }
      </section>
    </div>
  );
}

// tab이라는 state 값에 따라 다른 내용을 보여주는 역할을 하는 컴포넌트입니다.
function ClickTab({tab, food, product, book}) {
  if(tab === 'food') {
    return( <ShowContent data={food} /> );
  }
  if(tab === 'product') {
    return( <ShowContent data={product} /> );
  }
  if(tab === 'book') {
    return( <ShowContent data={book} /> );
  }
}

function ShowContent({data}) {
  return(
    data.map((item, i) => {
    return(
      <Link to={item.url} className={cn(style.item, style.link)} key={i}>
        <div className={cn(style.imgContainer)}>
          <img src={item.img} alt="나눔" />
        </div>
        
        // 제목이 10자 이상일 때와 아닐 때를 삼항 연산자로 원하는 형태로 변경하였습니다.
        <h2>
          {
            item.title.length >= 10 
            ? item.title.slice(0, 11).concat('...') 
            : item.title
          }
        </h2>
        
        <div className={cn(style.subInfo)}>
          // 숫자일 때에만 뒤에 '원'이 붙도록 표현했습니다.
          <strong>
            {
              item.cost != '가격없음' ? item.cost.concat('원') : item.cost
            }
          </strong>
          <span>{item.location}</span>
        </div>
      </Link>
    );
  );
}

 

---

 

📌 결과

• tab이 food일 때

 

• tab이 product일 때