[React] Tab 만들고 애니메이션 추가하기

💡 실습 포인트!

---

💜 Tab 만들기 전에 생각해보기

function Detail(){

  return (
    <div>
    
      <button>상세정보</button>
      <button>리뷰</button>
      <button>Q&A</button>
      
      <div>상세정보 내용입니다.</div>
      <div>리뷰 내용입니다.</div>
      <div>Q&A 내용입니다.</div>
      
    </div>
  )
}

• 3개의 탭으로 구성한다고 가정했을 때, 클릭할 버튼 태그 3개와 버튼을 클릭했을 때 보여줄 내용이 들어갈 div 태그가 3개 있는 UI 라고 생각할 수 있다.
• 이제 거기서 각 버튼을 누르면 해당 버튼에 맞는 div 태그를 보여주면 된다.
• 따라서, 몇 번째 버튼을 눌렀는지 state 로 저장해두고, state 에 따라 알맞은 div 박스를 보이도록 혹은 보이지 않도록 처리해주면 된다.

---

💜 Tab UI 디자인하기

• 빠른 디자인을 위해서 React Bootstrap 에서 Tabs 를 검색해서 마음에 드는 디자인을 복사하여 Detail.js 파일에 붙여넣기해주었다.

 

import {Nav} from 'react-bootstrap';

• React Bootstrap 에서 원하는 디자인을 가져올 때는 가져온 Component 를 꼭 import 해주어야 한다.

 

  <Nav className="mt-5" variant="tabs" defaultActiveKey="0">
    <Nav.Item>
      <Nav.Link eventKey="0">상세정보</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="1">리뷰</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="2">Q&A</Nav.Link>
    </Nav.Item>
  </Nav>

  <div>상세정보 내용입니다.</div>
  <div>리뷰 내용입니다.</div>
  <div>Q&A 내용입니다.</div>

• 우선, eventKey 라는 속성에 각각 다른 값을 입력하여 각 탭들을 구별해주었다.
• 다음으로 기본으로 활성화될 탭을 정하는 부분인 defaultActiveKey 를 정해주면 되는데 나는 맨 처음에 eventKey 가 0 인 탭을 보여주도록 defaultActiveKey='0' 으로 작성했다.

 

• 이제 미리보기로 확인하면 위와 같이 탭 UI 가 생성된 것을 확인할 수 있다.

---

💜 Tab 기능 개발하기

🤍 Tab UI 의 상태를 저장할 state 만들기

• 이제 각 버튼을 누르면 해당하는 div 박스를 보여줄 수 있어야 하기 때문에 어떤 버튼을 눌렀는지 저장해줄 state 가 필요하다.
• 즉, 버튼을 누르면 state 가 0, 1, 2 이런 식으로 바뀌어 저장되면 되는 것이다.

let [clickedTab, setClickedTab] = useState(0);

• 그래서 clickedTab 이라는 state 를 만들어서 초기값을 0으로 설정해주었다.

---

🤍 onClick 속성으로 클릭한 Tab 의 번호로 state 변경해주기

  <Nav className="mt-5" variant="tabs" defaultActiveKey="0">
    <Nav.Item>
      <Nav.Link eventKey="0" onClick={()=>{setClickedTab(0)}}>상세정보</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="1" onClick={()=>{setClickedTab(1)}}>리뷰</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="2" onClick={()=>{setClickedTab(2)}}>Q&A</Nav.Link>
    </Nav.Item>
  </Nav>
  
  <div>상세정보 내용입니다.</div>
  <div>리뷰 내용입니다.</div>
  <div>Q&A 내용입니다.</div>

• 이제 각 버튼을 클릭하면 setClickedTab() 함수를 이용해 clickedTab 에 저장된 값을 클릭한 버튼의 번호로 바뀌도록 해주었다.
• 즉, 0번 탭을 클릭하면 clickedTab 이라는 state 가 0 이 되고, 1번 탭을 클릭하면 1이 되는 식이다.

---

🤍 state 에 저장된 값에 맞춰 div 박스 보여주기

  <Nav className="mt-5" variant="tabs" defaultActiveKey="0">
    <Nav.Item>
      <Nav.Link eventKey="0" onClick={()=>{setClickedTab(0)}}>상세정보</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="1" onClick={()=>{setClickedTab(1)}}>리뷰</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="2" onClick={()=>{setClickedTab(2)}}>Q&A</Nav.Link>
    </Nav.Item>
  </Nav>
  
  <TabContent clickedTab={clickedTab}/>

• 이제 각 버튼을 클릭했을 때 clickedTab 에 저장된 값과 일치하는 div 박스를 보여주어야 한다.
• 즉, clickedTab 이라는 state 가 0 이 되면 0번 div 박스를 보여주고, 1 이 되면 1번 div 박스를 보여주는 식이다.
• 나는 이를 if 문으로 작성할 것이기 때문에 따로 TabContent 라는 Component 를 만들어주었다.
• 그리고 이 Component 에는 clickedTab 이라는 state 를 조건식에 사용할 것이므로 props 문법을 이용해 clickedTab 이라는 변수명으로 clickedTab 이라는 state 를 TabContent Component 로 전송해주었다.

 

 

 

function TabContent(props) {

  if (props.clickedTab === 0){
    return (<TabContentTitle className="mt-5">상세정보 내용입니다.</TabContentTitle>)
  } else if (props.clickedTab === 1) {
    return (<TabContentTitle  className="mt-5">리뷰 내용입니다.</TabContentTitle>)
  } else if (props.clickedTab === 2) {
    return (<TabContentTitle className="mt-5">Q&A 내용입니다.</TabContentTitle>)
  }
}

• 이제 TabContent 에서 clickedTab 이라는 state 를 props 로 받아온 후, if 문을 작성해주었다.
• if 문 부분은 해석이 어렵지 않으니 설명은 생략!

 

let TabContentTitle = styled.div`
  font-size: 30px;
  font-weight: bold;
  background: #eee;
  padding:200px 0;
`

• TabContent Component 내에서 사용한 TabContentTitle 이라는 Component 가 궁금할 수 있는데, 이는 styled-components 라는 라이브러리를 사용해서 Component 에 바로 스타일을 입힌 것이다.
  (styled-components 라이브러리가 궁금하다면 클릭!)
• 여기까지만 해도 기본적인 기능에 충실한 탭이 완성된다.

---

💜 Tab 에 애니메이션 효과 넣어보기

🤍 애니메이션 효과 넣는 일반적인 방법 알아보기

• HTML, CSS 작성할 때와 동일하게 애니메이션 효과를 만들 수 있다.
  • 먼저 애니메이션을 주는 class 를 css 파일에 작성한다.
  • Component 생성 및 업데이트될 때 className 을 붙여준다.

---

🤍 react-transition-group 라이브러리 사용하기

1. react-transition-group 라이브러리 설치하기

• react-transition-group 이라는 라이브러리를 사용하는 패턴만 알면 css 를 잘 활용하지 못하더라도 간단한 애니메이션을 부여하기 쉽다.

// npm 을 이용하는 경우
npm install react-transition-group

// yarn 을 이용하는 경우
yarn add react-transition-group

• 일단 위 코드 중 하나를 터미널에 입력하여 react-transition-group 이라는 라이브러리를 설치해준다.

 

import {CSSTransition} from 'react-transition-group';

• 설치가 완료되면 애니메이션 효과를 주고자 하는 Component 가 있는 파일 상단에 위와 같이 코드를 작성하여 CSSTransition 을 import 해준다.

 

• react-transition-group 의 사용방법은 다음과 같다.
  • 먼저, <CSSTransition></CSSTransition> 으로 애니메이션 효과를 적용할 HTML 들을 감싸준다. 
  • 그러고 나서 <CSSTransition> 에 in, classNames, timeout 속성을 넣어준다.

 

2. <CSSTransition></CSSTransition> 으로 애니메이션 효과를 적용할 HTML 감싸주기

  <CSSTransition in={onOff} classNames="show" timeout={1000}>
    <TabContent clickedTab={clickedTab}/>
  </CSSTransition>

• 따라서 나는 TabContent Component 를 <CSSTransition></CSSTransition> 으로 감싸주었다.
  • in 은 스위치에 해당하며 true 일 때 애니메이션 효과를 적용해준다.
  • classNames 는 어떤 애니메이션을 적용할지 이름을 정해주는 부분이다.
  • timeout 은 해당 애니메이션 효과의 작동시간을 의미한다.

 

3. CSS 파일에서 애니메이션 효과 디자인하기

.show-enter {
	opacity: 0;
}

.show-enter-active {
	opacity: 1;
	transition: all 1000ms;
}

• 이제 css 파일(혹은 scss 파일)에서 애니메이션 효과를 디자인해주면 된다.
• 나의 경우 classNames 를 show 라고 정해주었기 때문에 .show-enter, .show-enter-active 와 같이 클래스명을 작성해준 후 css 를 작성하면 된다.
  • -enter 가 붙은 경우 Component 생성될 때 적용할 CSS 를 작성하면 된다.
  • -enter-active 가 붙은 경우 Component 활성화되어있는 동안 적용할 CSS 를 작성하면 된다.
• 나는 투명도 속성인 opacity 를 0에서 1이 될 수 있게 만들어주었다.
• transition 속성은 특정 속성을 특정 시간동안 서서히 변하도록 도와주는 속성인데, 나는 모든 속성이 1초의 시간동안 변하게 해달라고 css 를 작성했다.

 

4. 평소에 in={false} 로 해두었다가 애니메이션 효과를 적용해야 할 때 true 로 바꿔주기 

// 전체 코드 미리보기
// 코드의 내용이 너무 길어서 불필요한 부분은 제외했다.

function Detail(props) {

  let [onOff, setOnOff] = useState(false);

  return (
    <div className="container">

      <Nav className="mt-5" variant="tabs" defaultActiveKey="0">
        <Nav.Item>
          <Nav.Link eventKey="0" onClick={()=>{setOnOff(false); setClickedTab(0)}}>상세정보</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="1" onClick={()=>{setOnOff(false); setClickedTab(1)}}>리뷰</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="2" onClick={()=>{setOnOff(false); setClickedTab(2)}}>Q&A</Nav.Link>
        </Nav.Item>
      </Nav>

      <CSSTransition in={onOff} classNames="show" timeout={1000}>
        <TabContent clickedTab={clickedTab} setOnOff={setOnOff}/>
      </CSSTransition>

    </div>
  )
}

function TabContent(props) {

  useEffect(()=>{
    props.setOnOff(true);
  })

  if (props.clickedTab === 0){
    return (<TabContentTitle className="mt-5">상세정보 내용입니다.</TabContentTitle>)
  } else if (props.clickedTab === 1) {
    return (<TabContentTitle  className="mt-5">리뷰 내용입니다.</TabContentTitle>)
  } else if (props.clickedTab === 2) {
    return (<TabContentTitle className="mt-5">Q&A 내용입니다.</TabContentTitle>)
  }
}

 

let [onOff, setOnOff] = useState(false);

• <CSSTransition> 안의 in 속성이 상황에 따라 true / false 로 바뀌어야 하므로 onOff 라는 state 를 하나 만들어주었다.

 

  <Nav className="mt-5" variant="tabs" defaultActiveKey="0">
    <Nav.Item>
      <Nav.Link eventKey="0" onClick={()=>{setOnOff(false); setClickedTab(0)}}>상세정보</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="1" onClick={()=>{setOnOff(false); setClickedTab(1)}}>리뷰</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="2" onClick={()=>{setOnOff(false); setClickedTab(2)}}>Q&A</Nav.Link>
    </Nav.Item>
  </Nav>

• 특정 탭을 클릭해서 해당하는 TabContent Component 가 로드될 때 onOff state 를 true 로 만들어 줄 것이기 때문에, 일단은 각 탭을 누르면 무조건 onOff 라는 state 가 false 가 되도록 만들어주었다.
  (Component 로드 전에 모든 탭을 안 보이게 초기화하는 과정처럼 생각하면 될 듯하다.)

 

  <CSSTransition in={onOff} classNames="show" timeout={1000}>
    <TabContent clickedTab={clickedTab} setOnOff={setOnOff}/>
  </CSSTransition>

• TabContent Component 에서 setOnOff() 를 사용할 것이기 때문에 미리 setOnOff 라는 변수명으로 setOnOff state 를 TabContent Component 로 전송해주었다.

 

function TabContent(props) {

  useEffect(()=>{
    props.setOnOff(true);
  })

  if (props.clickedTab === 0){
    return (<TabContentTitle className="mt-5">상세정보 내용입니다.</TabContentTitle>)
  } else if (props.clickedTab === 1) {
    return (<TabContentTitle  className="mt-5">리뷰 내용입니다.</TabContentTitle>)
  } else if (props.clickedTab === 2) {
    return (<TabContentTitle className="mt-5">Q&A 내용입니다.</TabContentTitle>)
  }
}

• TabContent Component 가 로드될 때 onOff 의 state 를 바꾸려면 useEffect() 를 사용하면 된다.
• 그래서, setOnOff 라는 state 를 props 로 받아준 후에 useEffect() 안에 props.setOnOff(true) 라고 코드를 작성하여, TabContent Component 가 로드될 때 onOff 가 true 가 되도록 해주었다.