[React] useForm > checkbock > setFocus 중앙 이동?

체크박스가 3개 있는데

현재 보여지고 있는 화면에 체크박스가 있으면 위치이동을 하지 않았나

 

스크롤위치가 중앙으로 이동하고 싶은데 왜 안될까?

(화면에서 해당 컴포넌트가 보이는 상황, 사용자가 보기 편하게 중앙으로 스크롤이 이동했으면 하는 바람..)

 

일단 기록용으로 적어보겠다.

---

1. 부모 컴포넌트 > 자식 컴포넌트

ㄴ useRef , forwardRef 

https://hanna-log.tistory.com/entry/forwardRef-%EC%9E%90%EC%8B%9D-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90-ref%EB%A5%BC-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

forwardRef: 자식 컴포넌트에 ref를 전달하기

ㄴ 현재 상황 : 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속성에 입력한 값을 위 처럼 적으면 된다.