useEffect, useCallback, useMemo 간 비교
배경 이 세가지 hook은 관련된? 변수의 변화에 따라 연동되어 실행됨. 그 차이를 살펴보자. useEffect( callback , [관련 변수] ) 최초 컴포넌트 마운트, 컴포넌트 내 레이아웃 배치와 랜더링 완료된 후에 실행. 두번째 인자에 관련변수를 지정하면, 해당 변수값이 수정될 때만 실행. useCallback ( callback , [ 관련 변수] ) 두번째 인자값이 변경되는 경우, 이전에 기억하는 함수 자체와 비교하여 수정이 된 경우에만 리랜더링 함수 자체를 기억. (함수 생성 자체가 오래걸리는 경우, 즉 함수 내의 연산이 복잡한 경우 등에 사용하면 도움됨) 함수 reference를 기억 useMemo( callback , [관련 변수] ) 두번째 인자값이 변경되는 경우, 이전에 기억하는 함..
2022. 1. 17.
swiper 2개 연결해보기
main 스와이퍼, sub 스와이퍼 두개를 연결해서 한쪽의 슬라이드가 이동시, 다른 스와이퍼도 해당 페이지가 이동되게 구현하고 싶었다. 스와이퍼 구현은 swiper 홈페이지에서 확인가능하므로 여기서 생각하고, 바로 본론으로 들어가자. 두개의 스와이퍼 연결은 controller를 이용해 가능하다. 마지막줄이 서로 다른 두 스와이퍼를 등록해 주는 것이다. const mainSwiper = new Swiper(".main-swiper", { slidesPerView:1, slidesPerGroup:1, width: 330, spaceBetween:35, pagination: { el: ".swiper-pagination", clickable: true, }, }); const subSwiper = new Sw..
2021. 12. 30.
