react useRef로 화면 이동하기

1. 프로젝트 내용

폼시트 느낌으로 next 버튼을 누르면 다음 화면으로 이동을 해야하지만 하나의 컴포넌트에 작성해서 스무스하게 이동하는 느낌을 만들어주려고 한다.

2. 기존 코드

const whenRef = useRef<HTMLInputElement>(null);
// 똑같은거 7개

const onClickWhen = () => {
    whenRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
// 똑같은거 7개
<div ref={whenRef}>
        <DatePick
          setSelect={setSelectDay}
          select={selectDay}
          onClickWeather={onClickWeather}
        />
</div>

위와 같이 동일한 함수, 컴포넌트와 useRef가 있었다.

3. 문제점

버튼을 제어하는 함수가 각각의 컴포넌트 안에 들어있기 때문에 위의 방법으로는 DOM에 제어를 할 수 없었기 때문에 함수를 밖에 만들어서 props로 내려주는 방법밖에 없었다.

4. 개선점

// 공통 함수 useRefClick
export const useRefClick = (x: any) => () => {
  x.current?.scrollIntoView({ behavior: "smooth", block: "start" });
};

동일한 역할을 하지만 파라미터를 받고 고차함수로 넘겨주었다.

const createBtn = (prev: any, next: any) => {
    return (
      <S.BtnSection>
        <S.BeforeBtnWrapper>
          <MoveButton
            type="button"
            onClick={useRefClick(prev)}
            contents="이전"
          />
        </S.BeforeBtnWrapper>
        <S.NextBtnWrapper>
          <MoveButton
            type="button"
            onClick={useRefClick(next)}
            contents="다음"
          />
        </S.NextBtnWrapper>
      </S.BtnSection>
    );
  };

버튼을 return 해주는 함수를 만들어주고 useRefClick을 onClick에 바인딩 해주었고

<div ref={weatherRef} className="ref">
        <WeatherPick selectFunc={selectWeather} />
        {createBtn(whenRef, whereRef)}
      </div>
         ```
필요한 곳에 useRef로 만들어진 부분을 인자값으로 넘겨주었다.