똑같이 따라했는데 왜인지 되지가 않네유...아랫분과 비슷한 경우인데
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
이런 에러가 뜨고 transition 작동이 안되어서,
https://github.com/reactjs/react-transition-group/issues/668 여기를 참조해서
코딩을 해봤는데 워닝은 없어지지만 그래도 여전히 transition이 작동이 안됩니다.
뭐가 잘못된건지 잘 모르겠네요...
저는 코딩을 이렇게 했습니다
( state 만들기 )
// clickTab
let [clickTab, clickTabChange] = useState(0); // --> 현재 누른 번호
// aniSwitch
let [aniSwitch, aniSwitchChange] = useState(false);
( 이건 오류를 없애기 위해 선언해야한다고 해서 )
const nodeRef = React.useRef(null);
( tab 메뉴 )
{/* Tab */}
<Nav className="mt-5" fill variant="tabs" defaultActiveKey="link-0"> <Nav.Item>
<Nav.Link eventKey="link-0" onClick={()=>{ aniSwitchChange(false); clickTabChange(0); }}>menu0</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1" onClick={()=>{ aniSwitchChange(false); clickTabChange(1); }}>menu1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2" onClick={()=>{ aniSwitchChange(false); clickTabChange(2); }}>menu2</Nav.Link>
</Nav.Item>
</Nav>
( tabContent )
<CSSTransition nodeRef={nodeRef} in={aniSwitch} className="Tab" timeout={500}>
<div ref={nodeRef}><TabContent clickTab={ clickTab } aniSwitchChange={ aniSwitchChange }></TabContent></div>
</CSSTransition>
( tabContent Component )
function TabContent(props){
useEffect(()=>{
props.aniSwitchChange(true);
})
if(props.clickTab===0){
return <div>0번입니다.</div>
} else if(props.clickTab===1){
return <div>1번입니다.</div>
} else{
return <div>2번입니다.</div>
}
}
( detail.scss )
// Tab animation
// enter --> animation 시작할 때 적용
.Tab-enter{
opacity:0;
}
// enter-active --> animation 동작할 때 적용
.Tab-enter-active{
opacity:1;
color:Red;
transition: all 500ms;
}
대체 왜 안되는 걸까요??ㅜㅜ 원래 애니메이션라이브러리는
리액트 부트스트랩이랑 같이 쓰는 게 아닌건가요??
