kimfield98
commented
1 month ago <StyledInput
key={index}
data-index={index}
value={pinCode[index]}
autoComplete="off"
onChange={onChange}
onKeyDown={onKeyDown}
type="password"
/>제가 구현했던 것 중 "핀코드" 라는 4자리 비밀번호를 하나씩 입력해야 하는 폼을 구현해야 했는데, 기존 입력 모달과 새로운 입력 모달 두 개가 같은 폼을 써야 했고 키보드 조작을 가능하도록 하기 위해 정확한 요소를 찾아 포커스를 맞출 수 있어야 했어요.
찾아보니 항해플러스 끝나고는 data-index 이런 식으로 data- 속성을 사용해서 구현한 적이 한 번 있네요 😆
chhw130
🧐 Question
1. 리액트 공식 문서에서 사라진 가상 DOM 용어
항해 1주차 학습 자료에서 'React를 반대하는 이유' 파트에 다음과 같은 글이 있습니다.
1주차 멘토링을 받으면서 테오에게 질문하기도 했고, 나름대로 이유를 찾아보려고 검색도 했었는데 정확한 이유는 아직 찾지 못했어요. 왜 없어졌을지에 대해 여러분의 생각이 궁금합니다:)
참고로 클로드는 아래와 같이 정리해서 대답해주었어요!
2. 데이터 속성 (사용자 정의 데이터 속성)
항해에서 테스트 과제를 진행할 때,
data-test-id이런 식으로 속성 값을 지정했던 것 기억하시나요?? 항해 수업을 듣기 전 까지 저는 특정 요소를 잡아내고 싶으면 항상 class나 id 값을 지정해서 사용했었는데, 데이터 속성을 알게 된 이후로 나름 쏠쏠하게 응용 중이에요 😁 다른 분들은 현업에서 요소에 데이터 값을 넣고 싶을 때 어떤 방식을 사용하시는지 궁금해요:) 참고로 해당 방식은 프레임워크 라이브러리를 사용하지 않는 순수 프론트 개발에서 유용하게 사용할 수 있다고 합니다!📝 Reference
1. 리액트 공식 문서에서 사라진 가상 DOM 용어
(Claude 답변) 리액트의 가상 DOM에 대한 설명과 리액트 공식 문서에서 가상 DOM 언급이 없어진 이유
2. 데이터 속성 (사용자 정의 데이터 속성)
MDN 데이터 속성 사용하기 html의 data-속성 사용법 완벽 가이드 (Claude 답변) 데이터 속성에 대한 설명