choijming21 님의 블로그

제가 팀프로젝트에서 이번에 적용해야 할 것은 유저가 버튼(전체 스터디 보기)을 클릭했을 때, 자동으로 전체 스터디 컴포넌트로 스크롤 되는 동작을 구현해야 합니다:) 그럼 먼저 useRef에 대해 알아보도록 하겠습니다.  1. useRef란?React 공식 홈페이지에서는 ".current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다." 라고 설명하고 있습니다.쉽게 말하자면, useRef의 Ref는 reference(참조)의 줄임말로 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. 주요한 특징은 특정한 DOM 요소에 접근이 가능하며, 불필요한 재렌더링을 하지 않는다..

1. 프로젝트 구조📦src ┣ 📂types ┃ ┗ 📜createElementTypes.ts // 타입 정의 ┣ 📜App.tsx // 메인 컴포넌트, 진입점 ┣ 📜jsx.ts // createElement 구현 ┣ 📜render.ts // Virtual DOM → 실제 DOM 변환 ┗ 📜style.css // 스타일    2. Virtual DOM 렌더링 함수(render.ts)렌더링 함수는 Virtual DOM을 실제 DOM으로 변환하는 핵심 기능을 담당합니다.import { VirtualElement } from "./types/createElementTypes";export ..