이번 프로젝트에서는 아주 작은 것이라도 한 단계 한 단계 배운 것들을 정리하고 기록해 보려고 한다.

버튼 onClick으로 보여주는 컴포넌트 전환하기

리액트에서, URL에 따라 다른 컴포넌트를 보여줄 때는 router를 사용하면 된다. 그러나 같은 URL, 같은 페이지 내에서 보여주는 컴포넌트를 전환하기 위해 useState와 삼항연산자를 썼다.

기본 설정

import React, { useState } from "react";
import { Button } from 'antd';

import Calendar from '../../components/main/calendar';
import Timeline from '../../components/main/timeline';

• 리액트와 useState를 import 한다.
• Button은 ant design을 썼다.
• 필요한 컴포넌트들도 함께 import 해준다.

접근 방법

1. calendar를 보여주는 state 값을 Boolean으로 설정한다. 기본값은 true로 설정한다.
2. timeline 버튼 onClick시 해당 값을 false로, calendar 버튼 클릭시 다시 true로 설정한다.
3. 삼항연산자를 이용해 해당 값이 true 일 때는 calendar, false 일 때는 timeline을 보여주도록 하자.

코드

function Main() {

  const [viewCalendar, setViewCalendar] = useState(true)

  return (
    <div className="contentWrapper">
      <div className="contentTitle">
        나의 잇다이어리
      </div>
      <div className="contentBody mainWrapper">
        <div className="mainButtonWrapper">
          <Button
            onClick={() => setViewCalendar(true)}
          >
            달력
          </Button>
          <Button
            onClick={() => setViewCalendar(false)}
          >
            타임라인
          </Button>
        </div>
        <div className="mainComponentWrapper">
           { viewCalendar ? <Calendar/> : <Timeline/> }
        </div>
      </div>
    </div>
  );
}

export default Main;