탭 애니메이션 스테이트 변경(사용)시 워닝

[노재근]

function TabComponent(props) {

    useEffect(()=>{
        props.setAniSwitch(true); //여기에서 워닝떠요
    })

    if (props.tab === 0) {
        return <div>0번째 내용</div>
    } else if (props.tab === 1) {
        return <div>1번째 내용</div>
    } else if (props.tab === 2) {
        return <div>2번째 내용</div>
    }
}

되기는 잘 되는데 콘솔창에

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.

요런게 떠서 검색해보니

If you're using a Modal or Carousel from react-bootstrap a workaround is disabling the animations. Turning them off makes the warning disappear.

( https://url.kr/asmw5e ) 스텍오버플로우

라고 리엑트 부트스트렙 쓰면 애니메이션 쓰지 말라는데

혹시 useEffect안에 넣어서 그런가 하고 if안에 넣어봤더니 안돌아가네염

혹시나 해서 useEffect 리턴문 안에 넣어서도 해봤는데 똑같이 애니메이션은 잘되는데 warning떠용

위 링크처럼 애니메이션 스위치 빼서 안쓰니까 워닝은 안뜨네용(당연 애니메이션도 안됨)

 

차라리 false랑 true일때 발동되는 애니메이션을 거꾸로 해버리고 초기화를 false로 해버릴까요

 

제 손을 잡아주시옵소서 전하

 

[codingapple]

찾아보니 <transition> 태그 안에 있는 내용을 <div>로 묶으라고 하네요 

[노재근]

센세.. 일단 성공은 했습니다만 원리를 모르겠습니다..

일단 div로 묶는것 만으로는 실패했습니다. 그래서

말씀하신대로 <div>로 묶는걸 키워드로 검색해서 

https://github.com/reactjs/react-transition-group/issues/668

이 글을 보고 상단에 

const nodeRef = useRef(null); 를 추가하고

<CSSTransition nodeRef={nodeRef} in={aniSwitch} classNames="wow" timeout={500}>
                        <div ref={nodeRef}><TabComponent tab={tab} aniSwitch={aniSwitch} setAniSwitch={setAniSwitch}></TabComponent></div></CSSTransition>

 

div로 감싸기 전 컴포넌트와 해당 div에 nodeRef 를 넣어주라고 해서 이대로 따라하니 warning이 없어졌습니다..(만쉐이)

그런데 왜 이렇게 된 것인지 모르겠습니다.. 물론 공부를 계속 하겠지만 센세께서 추측하시는 이유가 있으신지 소인 조심스럽게 여쭤보고 싶사옵니다..

깃헙 답글들을 보니 다른 코쟁이들도 라이브러리가 문제라고 하는데 아직 통찰력이 부족한 소인은 견해가 얕아 센세와 같이 명쾌하게 풀어나가지 못하겠습니다..

그리고 해당 챕터 강의에도 이 문제 해결법을 추가하여 다른 어린 양들에게 좌절감을 극복시켜주심이 어떤지 조심스럽게 간청하옵니다..

[codingapple]

라이브러리 만든 사람이 deprecated된 함수를 써서 그런 것이기 때문에 굳이 원리를 알 필요는 없습니다 

라이브러리가 나중에 업데이트되겠죠 뭐 

[이지은]

저랑 똑같이 에러 뜨셨네요... 저도 이거 안되서 노재근님처럼 똑같이 해봤는데 그래도 transition이 안되네요......ㅜㅜ

에러 뜬 것도 다 사라졌는데 저는 왜 안될까유.....

[노재근]

깃헙 주소 있으세요?? 제 코드랑 비교하면서 한번 봐드릴께요! 전 거의 다 끝나서요 ㅎㅎ

[이지은]

도와주신다니 너무 감사해요 !!!

ㅜㅜㅜ 깃헙 주소가 없네요

이것도 에러가 떠서 해결을 못하고 있는 참입니다...

노재근 님 바로 위 Q&A에 제 코드를 복사해서 올렸는데 

혹시 괜찮으시면 확인 한번 부탁드리께요 ...!

[노재근]

아이고 글을 못봤네 죄송합니다..

[글쓴이]

글