twingkle

  • 홈
  • 방명록

useRef map 1

useRef()를 사용한 onClick이벤트(Object에서 map 사용하기)

❓쓰게된 이유 처음 프로젝트를 시작할땐 탭의 수가 별로 많지 않았기에 그냥 하드코딩하는 방식으로 useRef()를 썼는데, 진행을 하다보니 브랜드의 수만큼 탭수가 늘어나고, 브랜드가 추가되면 또 일일이 추가해줘야하는 번거로움이 생겼다. 💡목적 그래서 map으로 돌려주어 한번만 쓰려고하는데 찾아보니 click했을때 이동되는 탭으로 만들어두신 글은 잘 없었다. 여러개의 글들을 참고하여 구현해봤다. 우선 내가 구현해야할 기능은 탭을 눌렀을 때, Ref가 되어있는 곳으로 내려가야 하는 기능이다. 위의 화면에서 아래의 화면같이 저 위의 탭들을 누르면 탭안에 있는 곳으로 스크롤이 이동되는 기능이었다. 아직 헤더높이를 계산하지않아서 제목이 보이지않지만 헤더가 없으면 브랜드이름있는 부분이 헤더의 밑으로 오게되는 것이다..

프로젝트/메인프로젝트(유통) 2022.11.24
이전
1
다음
더보기
프로필사진

개발을 사랑하고 노력하는 모습을 기록하는 곳입니다.

  • 분류 전체보기 (73)
    • 프로젝트 (13)
      • stackoverflow(clone) (1)
      • 메인프로젝트(유통) (6)
      • 메이킹 챌린지 10기 (2)
      • 사이드프로젝트1 (4)
    • 개발공부 (53)
      • TIL (16)
      • 개념정리 | Javascript (11)
      • 개념정리 | CSS (3)
      • 개념정리 | TypeScript (6)
      • 개념정리 | React (1)
      • 알고리즘 (11)
      • 네트워크 (3)
      • UX UI (2)

Tag

styled-component, a태그의 중첩, mdEditor, 탭누르면스크롤이동, descendant of <a>, useRef여러개, 개발일지, 피터모빌, 내일배움단 #코딩프로젝트 #국비지원 #내일배움카드 #스파르타코딩클럽, toastEditor, 중첩된링크, input err, input null, #내일배움단 #코딩프로젝트 #국비지원 #내일배움카드 #스파르타코딩클럽, useRef map, 여러 자식이 제공되었습니다., 이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, object[], typescript에러, user flow,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/08   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바