Tab UI / Animation

Tab UI는 밑에 처럼 만들어서 첫 버튼을 누르면 첫 div가 두번째 버튼을 누르면 두번째 div가 보여지게 만든다

{/* tab기능만들기 */}
            <button></button>
            <button></button>
            <button></button>

            <div></div>
            <div></div>
            <div></div>

만드는 방법은 몇번째 버튼 눌렀는지 state로 저장해두고, state에 따라 UI를 보이게 안보이게 한다. 위의 버튼말고 부트스트랩을 이용해서 만들어보자.

import {Nav} from 'react-bootstrap';

function Detail() {
	return (
    		<Nav variant="tabs" defaultActiveKey="link-1" className="mt-5">
            		<Nav.Item>
              			<Nav.Link eventKey="link-0">Active</Nav.Link>
            		</Nav.Item>
           		 	<Nav.Item>
              			<Nav.Link eventKey="link-1">Option 2</Nav.Link>
            		</Nav.Item>
            		<Nav.Item>
              			<Nav.Link eventKey="link-2">Option 3</Nav.Link>
            		</Nav.Item>
          </Nav>
    )
}

이렇게 UI를 만들어보고 기능을 구현해보자

Nav의 defaultActiveKey="link-0"은 기본으로 눌러진 버튼의 eventKey를 뜻한다. 페이지를 방문했을 때 기본으로 눌러진 키를 뜻한다. 그리고 각각에 eventKey="link-0,1,2"를 달아서 각자의 키를 담아준다.

function Detail() {
	let [누른탭, 누른탭변경] = useState(0);//stae를 만들어 몇번째 버튼 눌럿는지 저장 현재 0

	return (
    		<Nav variant="tabs" defaultActiveKey="link-1" className="mt-5">
            		<Nav.Item>
              			<Nav.Link eventKey="link-0">Active</Nav.Link>
            		</Nav.Item>
           		 	<Nav.Item>
              			<Nav.Link eventKey="link-1">Option 2</Nav.Link>
            		</Nav.Item>
            		<Nav.Item>
              			<Nav.Link eventKey="link-2">Option 3</Nav.Link>
            		</Nav.Item>
          </Nav>
          
          <TabContent 누른탭={누른탭}/>
    )
}
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>
  }
}

그 다음에, 누른탭이라는 state를 만들어 번호를 저장한다. 그 다음엔, 조건이 2개 이상이 되면 삼항연산자를 사용할 수 없으므로 새로운 TabContent라는 컴포넌트를 만들고 props를 전달해줘서 if문 함수를 만들어 준다.

 

animation추가는 

미리 애니메이션 주는 class를 제작해놓고, 

컴포넌트 등장/업데이트될 때 className에 부착하면 된다.

리액트에서 클래스 부착이 귀찮아서 라이브러리를 사용하기도 한다.

npm install react-transition-group
//yarn add react-transition-group

를 입력하고, 상단에

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

를 import해온다. 이 라이브러리는 컴포넌트 등장/업데이트 시 transition을 쉽게쉽게 줄 수 있다.

<CSSTransion in={true} classNames="wow" timeout={500}>
            <TabContent 누른탭={누른탭}/>
</CSSTransion>

이렇게 애니메이션을 줄 부분을 CSSTransition으로 감싸주고, 3가지를 작성해준다

in={}  값이 true이면 애니메이션이 동작함 애니메이션 켜는 스위치이다.

classNames=""  애니메이션 이름이 됨

timeout={}  값이 애니메이션 동작 시간이 됨

 

그 다음에, css파일에 wow라는 클래스이름으로 작성해준다.

.wow-enter { //애니메이션 시작 때 적용할 CSS
    opacity: 0;
}
.wow-enter-active { //애니메이션 동작 때 적용할 CSS
    opacity: 1;
    transition: all 500ms;
}

css는 -enter과 -enter-active를 적어준다. 다음은 시작 때, 투명도가 0이였다가 동작하면 500ms에 거쳐 투명도가 1로 바뀐다. (exit애니메이션도 가능)

 

마지막으로, in={}에 true를 어떨 때 스위치를 켤지만 정해주면 된다. 보통 변수나 state로 저장해서 사용한다.

let [스위치, 스위치변경] = useState(false);

<CSSTransition in={스위치} classNames="wow" timeout={500}>
            <TabContent 누른탭={누른탭} 스위치변경={스위치변경}/>
</CSSTransition>

이렇게, 스위치 state를 만들고 in에 state를 적고 하위컴포넌트로 전송한 뒤,

function TabContent(props) {

  useEffect(()=>{
    props.스위치변경(true);
  })
  if ( props.누른탭 === 0 ) {
    return <div>0번내용</div>
  } else if ( props.누른탭 === 1 ) {
    return <div>1번내용</div>
  } else if ( props.누른탭 === 2 ) {
    return <div>2번내용</div>
  }
}

이렇게 useEffect를 사용해 TabContent라는 컴포넌트가 (UI설명란이 켜질 때)마다 스위치를 작동해 애니메이션을 작동하게 하면 된다.

그리고 버튼을 누르면

<Nav variant="tabs" defaultActiveKey="link-0" className="mt-5">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{스위치변경(false); 누른탭변경(0)}}>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{스위치변경(false); 누른탭변경(1)}}>Option 2</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-2" onClick={()=>{스위치변경(false); 누른탭변경(2)}}>Option 3</Nav.Link>
        </Nav.Item>
</Nav>

<CSSTransition in={스위치} classNames="wow" timeout={500}>
		<TabContent 누른탭={누른탭} 스위치변경={스위치변경}/>
</CSSTransition>

스위치변경을 false로 바꿔서 꺼지게 할 수 있다.

버튼을 누르면 false였다가 컴포넌트가 켜지면서 true로 바뀌어 동작하게 된다. 그러곤 true 상태로 남앗다가, 다시 버튼을 누르면 false였다가 컴포넌트가 켜지면서 true로 바뀌어 동작하고 다시 true로 남게 된다.