choijming21 님의 블로그

1. 문제 발생❓모달 구현 작업 중 예상치 못한 문제가 발생했습니다.be, fe, ai 세 페이지에서 각각 독립적으로 모달이 표시되어야 하고 상태 관리도 개별적으로 이루어져야 하는데한 페이지에서 모달이 표시된 후에는 다른 페이지에서 모달이 더 이상 나타나지 않는 버그를 발견했습니다.구체적으로, be 페이지에서 모달을 한 번 띄운 후 다른 페이지로 이동하면 해당 페이지에서는 모달이 표시되지 않는 현상이 발생했습니다. 2. 원인 추론 🔎모달 상태관리를 살펴보았습니다:세 페이지의 모달의 상태를 하나의 atom으로 관리하고 있었습니다.하나로 관리하고 있기 때문에 isAlreadyModal이 true 바뀌면서 다른페이지에서도 이미 true값이기 때문에 모달의 띄어지지 않았던..

1.  문제 발생❓TypeScript에서 MutableRefObject 타입을 사용하는 Lnb 컴포넌트에서 refs.current를 배열처럼 처리하려고 할 때 문제가 발생했습니다. PdpRefs는 Map 타입으로 정의되어 있지만, 실제로는 숫자 인덱스(0, 1, 2, 3 등)로 접근할 수 있는 객체로 동작했습니다.// 타입 정의export type PdpRefs = Map;// 컴포넌트에서 시도한 코드{refs.current.map((ref, index) => { // 오류: 'map' 속성이 없습니다 // ...})}   2.  원인 추론 🔎TypeScript 타입으로는 PdpRefs가 Map 객체로 정의되어 있음실제 런타임에서 refs.current는 다음과 같은 특성을 보임Object.keys(..

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