애니메이션 부여하기

1. 일반 CSS 짜듯이 애니메이션 class를 하나 만들어두고
2. 컴포넌트가 보여질 때 / 업데이트될 때 className에 부여되도록 코드를 짜면 되는데 react-transition-group이라는 라이브러리를 사용 하면 매우 편리해짐.

(Detail.js)

function Detail(){
  return (
    <div>
      <button>버튼0</button>
      <button>버튼1</button>
      <button>버튼2</button>
      <div>내용0</div>
      <div>내용1</div>
      <div>내용2</div>
    </div>
  )
}

▲ 버튼3개, div 3개가 있는 UI
버튼을 누르면 각각 거기 맞는 div를 화면에 보여줌

UI 만드는 법

1. 몇번째 버튼 눌렀는지를 state로 저장해둠
2. state에 따라 div를 보이게/안보이게 해주면 됨.

위와 같은 방법도 있고 한 번에 쉽게 불러오기만 하면 완성되는 부트스트랩 라이브러리를 이용해서 손쉽게 만들수 있다(Tabs라고 치면 나옴)

(Detail.js)

function Detail(){
  let [누른탭, 누른탭변경] = useState(0);
  return (
    <div>
      <Nav variant="tabs" defaultActiveKey="link-0">// 처음 진입시 몇번째것을 보여주겠는가?
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{ 누른탭변경(0) }>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{ 누른탭변경(1) }>Option 2</Nav.Link>
        </Nav.Item>
      </Nav>
      <div>내용0</div>
      <div>내용1</div>
      <div>내용2</div>
    
    </div>
  )
}

*물론 Nav에 대해 react-bootstrap으로 부터 import 해와야함

Detail component안에서만 쓸것같으니 state값을 이 안에 설정하겠다.
state가 0이면 0번div, 1이면 1번 div를 보여달라를 삼항연산자를 이용해서 하면 좋겠지만,
if갯수가 늘어나면 삼항연산자로는 복잡해짐
해결책 -> if문을 적용한 컴포넌트를 하나 만든다.

(Detail.js)

function Detail(){

  let [누른탭, 누른탭변경] = useState(0);
  return (
    <div>
      <Nav variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{ 누른탭변경(0) }}>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{ 누른탭변경(1) }}>Option 2</Nav.Link>
        </Nav.Item>
      </Nav>
      <TabContent 누른탭={누른탭}/>
    
    </div>
  )
}

* 삼항 연산자는 if문이 3개이상일땐 유용하지 못함

function TabContent(props){
  if (props.누릅탭 === 0){
    return <div>내용0</div>
  } else if (props.누릅탭 === 1){
    return <div>내용1</div>
  } else if (props.누릅탭 === 2){
    return <div>내용2</div>
  }
}

애니메이션 넣는 방법

1. 애니메이션 주는 class를 css 파일에 제작
2. 컴포넌트 등장/업데이트시 className을 부착
   위 과정이 귀찮으면 터미널 켜서 npm install react-transition-group
   애니메이션 줄 컴포넌트 파일 상단에
   import {CSSTransition} from 'react-transition-group';
   그 다음 step1. CSSTransition으로 애니메이션 적용할 HTML감쌈
   (Detail.js)

import './Detail.scss';

function Detail(){
  let [스위치, 스위치변경] = useState(false);
  return (
    <div>// in은 스위치, className은 어떻게 꾸밀지 작성된 클래스, timeout은 작동시간
    
      <CSSTransition in={스위치} classNames="wow" timeout={500}>// 주석을 이 안에 작성했다 하더라도 react child 요소가 하나만 와야한다는 에러메세지를 받음.
        <TabContent 누른탭={누른탭} />
      </CSSTransition>
    </div>
  )
}

function TabContent(){
  if (props.누른탭 === 0){
    return <div>내용0</div>
  } else if (props.누른탭 === 1){
    return <div>내용1</div>
  } else if (props.누른탭 === 2){
    return <div>내용2</div>
  }
}

(Detail.scss)

.wow-enter {
  opacity : 0
}

.wow-enter-active {
  opacity : 1; 
  transition : all 500ms; // 0.5초간 동작하게 하라
}