인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

wndtlr10248980's profile image
wndtlr10248980

asked

Interactive Development Practice End [Capacity Enhancement]

Randomly scatter objects (appendChild)

여기에 나오는 강의들 리액트로 작성하기 쉬운편인가요?

Written on

·

213

0

안녕하세요!

리액트는 직접적으로 dom을 건드리면 안된다고 알고 있습니다.

그래서 인프런에있는 인터랙티브 강의들을 보고 리액트에서 동작

해주게끔 하고싶은데, 제가 리액트에대한 지식이 부족해서인지

조금 어려움이 있는데요..

useRef()를 사용해주는 방법이 있지만, 너무 사용이 잦은것 같아

고민이고, 또 다른 강사님들은 어떤식으로 구현을 하는지 들여다보고싶습니다.

나중에 리액트로 인터랙티브하게 만드는 강의를 내주실 계획이 있으신지 혹은 리액트로 인터랙티브하게 만들어보신 코드가 있다면 한펀 살펴보고싶습니다!

인터랙티브-웹javascript

Answer 2

1

wndtlr10248980님의 프로필 이미지
wndtlr10248980
Questioner

답변 너무 감사합니다!
강사님이 짜신 코드들부터 이해하고,습득한 후에 남겨주신 링크들을 따라치고 이해하고 또 습득하겠습니다!

1

coding11님의 프로필 이미지
coding11
Instructor

안녕하세요 리액트 + 인터랙티브 관련 문의가 종종 있네요.

저도 아직 리액트에서 인터랙티브 스크립트를 사용해보지 않았습니다.

리액트는 아시다시피 돔 자체를 건드리지 않다보니 필요한 경우에는 useRef()를 사용해주셔도 될 것 같고요

질문 주신 예제 영상처럼 랜덤으로 뿌려지는 모션이라면 컴포넌트를 만들어서 뿌려주는 것도 괜찮을 것 같습니다.

다른 강의에 비슷한 질문을 주셔서 아래 url을 드렸는데 참고해보세요.

https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/

_

스크롤 이벤트 사용 방법도 첨부드립니다.

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, true);
  }

https://gist.github.com/koistya/934a4e452b61017ad611

다음 강의를 한다면 우선 three.js를 할까 하고 있습니다.

리액트 + 인터랙티브는 저도 조금 더 연구를 해야할 것 같네요.

wndtlr10248980's profile image
wndtlr10248980

asked

Ask a question