[JS] 스크롤 내릴 때 효과 나타내기_(2)FadeThis + React에서 JQuery 사용하기

오늘 5시간 뻘짓한 내 모습...

 

 

오늘 사용해볼 플러그인은

jQuery FadeThis

이 사이트에 있다.

 

 

 

사용하기 전에 bower을 install해줘야 한다.

 

 

Issue

2020/07/30 ] 
플러그인 사용하려고 5시간동안 뻘짓만 했다...ㅎ 하하... 하지만 아직 미완성이다.ㅠㅠ

2020/07/31 (1차 : 새벽 3시 30분) ]
오후에 하려고 했는데,
어쩌다보니 지금 새벽 3시 30분이다.
찝찝해서 잠이 안 오는 걸 어떡해... 새벽에 해결하거나 동작 원리라도 이해해봐야겠다.

2020/07/31 (1차 : 새벽 5시 13분) ]
스크롤 이벤트 완료했다
성능은 모르겠고ㅎ 내일 업로드 하면서 좀 더 알아봐야지
졸린데 뿌듯하다🤧

 

---

 

bower이란?

 

- 웹 프론트엔드 패키지 관리 도구
- bower도 npm과 마찬가지로 설치뿐만 아니라 의존성까지 해결해준다.

- node.js를 사용한다면 npm을 생각하면 이해하기 가장 쉬울것이고(실제로도 비슷하다.)
  보통 언어별로 있는 의존성 라이브러리 관리자(메이븐, 루비젬 등등)이지만
  bower는 프론트엔드 전용이라는 점이 다르다.

Bower 란? (프론트 엔드 패키지 관리도구)

bower : 웹 프론트앤드 패키지 관리자 :: Outsider's Dev Story

 

 

 

1. bower install하기

 

1) install
npm install -g bower

2) 설치 확인
bower -v

 

 

 

2. install jquery-fadethis

bower install jquery-fadethis

 

 

 

3. include the script after jQuery. Requires jQuery 1.4+

 

<script src="jquery.js"></script>
<script src="jquery.fadethis.min.js"></script>

 

이거 적용이 안 된다..

Plugin쓰는 게 어렵게 느껴진다ㅠㅠㅠ

 

책 내용만 보고 따라했다는 게.. 조금 실감은 난다.

당시에는 이해했다고 생각했는데

 

다른 방식으로 활용하려니... 어렵다ㅠㅠ

 

 

---

다른 라이브러리와 통합하기

 

다른 라이브러리와 통합하기 – React

 

최상위 DOM 엘리먼트에 ref를 붙입니다. 
componentDidMount 내부에서 jQuery 플러그인에 전달하기 위해 최상위 DOM 엘리먼트에 대한 참조를 얻습니다.

마운팅 후 React가 DOM에 건드리는 것을 방지하기 위해 render() 메서드에서 빈 <div />를 반환합니다.
해당 <div /> 요소는 프로퍼티나 자식을 가지지 않기 때문에 React가 업데이트할 이유가 없습니다.
jQuery 플러그인이 DOM의 일부를 다룰수 있게 자유롭게 관리할 수 있습니다.

 

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.somePlugin();
  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');
  }

  render() {
    return <div ref={el => this.el = el} />;
  }
}

 

componentDidMount, componentWillUnmount 두 가지의 생명주기 메서드를 정의했다는 것을 주의합니다.

많은 jQuery 플러그인은 DOM에 이벤트 리스너를 등록하므로 componentWillUnmount 안에서 해제하는 것이 중요합니다. 플러그인이 해제를 위한 메서드를 제공하지 않는다면 자체적으로 해당 메서드를 제공해야 합니다.

메모리 누수를 방지하기 위해 플러그인이 등록한 모든 이벤트 리스너를 제거해야 하는 것을 잊어서는 안 됩니다.

 

 

 

 

React.js에서 Jquery 사용하는 방법

 

[react.js] react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery )