1주차 프로젝트 - My Heart 페이지 Active Tab기능 구현

프로젝트 진행중 카테고리 버튼을 클릭할 시 안에 컨텐츠만 변경이 되는 기능을 구현하게 되었다.
귀한 세션을 듣고 바로 적용한 것...안비밀..

변경될 부분만 다른 컴포넌트로 바꿔주어 그 부분만 렌더를 하면 되기 때문에 React의 주요 특징 중 하나인 SPA가 돋보이는 페이지라고 할 수 있을 것 같다.

각 카테고리에 맞게 메인 컨텐츠를 변경해주는데, 현재 컴포넌트들이 미완성 된 상태라서 임의로 생성 후 기능 구현 확인용 색 블럭으로 컨텐츠를 대신하여 표현했다.

주요 코드 ▼

//각 컴포넌트 import
import FavListTwoNineTV from "./FavListTwoNineTV";
import FavListProduct from "./FavListProduct";
import FavListPost from "./FavListPost";
import FavListBrand from "./FavListBrand";

//객체 타입으로 키값에 컴포넌트 지정
const obj = {
  0: <FavListProduct />,
  1: <FavListBrand />,
  2: <FavListTwoNineTV />,
  3: <FavListPost />,
};


class MyHeart extends React.Component {
  state = { activeId: 0, titleClicked: false }; //state설정

  handleClicked = (id) => {
    this.setState({ activeId: id, titleClicked: true });
  };//id 설정 및 타이틀 클릭시 true로 변경하여 폰트 굵기 변경 활성화


 	    <li
              onClick={() => this.handleClicked(0)}
              className={this.state.activeId === 0 && "myheartCategoryClicked"}
            >
              PRODUCT()
            </li>
            <li
              onClick={() => this.handleClicked(1)}
              className={this.state.activeId === 1 && "myheartCategoryClicked"}
            >
              BRAND()
            </li>
            <li
              onClick={() => this.handleClicked(2)}
              className={this.state.activeId === 2 && "myheartCategoryClicked"}
            >
              TV()
            </li>
            <li
              onClick={() => this.handleClicked(3)}
              className={this.state.activeId === 3 && "myheartCategoryClicked"}
            >
              POST()
            </li>
          </ul>
          <div className="myHeartContents">{obj[this.state.activeId]}</div>
//div 태그 안에 컨텐츠가 카테고리 클릭시 발생하는 함수에 의하여 컴포넌트로 보여지게 된다.