[React.js] cannot resolve 'react-transition-group' 오류 해결 방법

애니메이션 효과같은것들 적용 하려고 했던 react-transition-group이 서버 구동중 에러가 난다.

cannot resolve 'react-transition-group' 라는 에러메세지가 뜨길래

분명히 해당 패키지도 받았고 제대로 추가 시켰는데 왜 못찾는거지?

하고 검색을 해 보았다.

NPM에 올라온 글을 확인해 보니

This package is deprecated and will no longer work with React 16+. We recommend you use CSSTransitionGroup from react-transition-group instead.

In particular, its version 1.1.1 is a drop-in replacement for the last released version of react-addons-css-transition-group.

Run npm install --save react-transition-group@1.1.1, and replace the imports in your code

라고 올라와 있었다

내용인 즉슨

리액트 16 이상 버전 부터는 기존에 사용하던걸 지원하지 않고 아얘 동작도 되지 않게 되었으니

새로운 다른걸 써라~

라고 하는 것이다.

쟤네가 설치하라는거 설치 하고 임포트 문장도 아랫것 처럼 바꾸면

오류는 해결이 된다.

브라우저별 CSS 선택자(selector) 지원 여부.

예전 자료라 최신 버전은 없지만 어차피 최신 버전은 거의다 지원을 하니 지원이 안되는 브라우저를

찾아 보는 것에 중점을 두자.

진짜 익스플로러는 진짜 나쁜놈이다.

이것때문에 돌아버리는줄 알았네요

패딩을 0을주고 마진을 0을주고 별것 다 해봤는데도 간격이 그대로 있길래

미치기 직전까지 가던 와중에 다른 방법을 발견 했습니다.

뭐 저도 구글링하면서 발견 한거지만요

<li>

내용

</li><!-- 

 --><li>내용</li> 

이런식으로 li태그 사이에 주석처리로 공백을 없애 주면 됩니다.

<li>

내용

</li><li>내용</li>

이런식으로 공백을 없애도 되지만 가독성이 너무 떨어지기 때문에 위와 같은 방법을 사용하는것이 좋을것 같습니다.