[React] useForm > checkbock > setFocus 중앙 이동?
체크박스가 3개 있는데
현재 보여지고 있는 화면에 체크박스가 있으면 위치이동을 하지 않았나
스크롤위치가 중앙으로 이동하고 싶은데 왜 안될까?
(화면에서 해당 컴포넌트가 보이는 상황, 사용자가 보기 편하게 중앙으로 스크롤이 이동했으면 하는 바람..)
일단 기록용으로 적어보겠다.
1. 부모 컴포넌트 > 자식 컴포넌트
ㄴ useRef , forwardRef
forwardRef: 자식 컴포넌트에 ref를 전달하기
forwardRef()란?React에서 일반적으로 사용할 수 없는 prop이 몇 가지 있다. 그 중 ref prop도 HTML Element 접근이라는 특수한 용도로 사용되기 때문에 일반적인 prop으로 사용할 수 없다.React Component에서 ref p
hanna-log.tistory.com
ㄴ 현재 상황 : useForm 사용 중이고 resgister를 사용하여 name속성을 통해 setFocus("name")으로 접근 중
ㄴ 하고 싶은 것 : checkbox에 focus를 잡고 싶은데 현재 내가 보는 화면에 스크롤 위치가 체크박스가 보이기에 중앙으로 스크롤 이동하면서 해당 컴포넌트(Checkbox 컴포넌트 생성해서 사용중)로 이동하고 싶은데 안된다.
ㄴ 위에 페이지에서 알려준대로 했는데 잘 안되더라..(react는 가상돔 접근 시 useRef를 사용한다고 했다.)
ㄴ 추후에 다시 시도해보기로 해보겠다...
2. (사용) jquery 라이브러리에서 사용하던 방식으로 접근은 안될까?
const onError = (errors) => {
//화면에 보이는 필드 에러 순서대로 보이기
if (errors) {
const inputOrder = Object.keys(getValues());
// errors를 input 순서에 따라 정렬
const sortedErrors = inputOrder
.map((key) => ({ key, error: errors[key] }))
.filter((item) => item.error);
if (sortedErrors.length > 0) {
const { key, error } = sortedErrors[0];
alert(error.message);
if(key.includes("termsFirst")){
setTimeout(() => {
const element = document.querySelector(`[name="checkBoxFirst"]`);
if (element) {
element.scrollIntoView({
behavior: "smooth", // 부드럽게 스크롤
block: "center", // 화면 중앙에 위치
});
}
}, 0);
}
setFocus(key);
}
}
};
⭐const element = document.querySelector(`[name="checkBoxFirst"]`);
ㄴuseForm을 사용하면 register로 name을 선언하는데~
그때 작성한 name속성에 입력한 값을 위 처럼 적으면 된다.