문제 추가 페이지는 위와 같이 마크다운 에디터를 사용하고 있는데, 로딩이 끝나면 계속 맨 마지막 에디터로 포커스가 이동하고 스크롤이 내려가는 문제가 있었다.
처음으로 시도해본 것은 useEffect를 이용해 로딩이 완료되면 제일 위로 스크롤을 올리는 것이였다. 하지만 여전히 스크롤은 내려가고 포커스도 그대로였다.
그 다음으로 생각난 것은 문제 제목 Input에 포커스를 가게 하는 것이었다. 하지만 포커스가 다시 마지막으로 이동했다.
사용하는 마크다운 에디터를 찾아보니 onLoad props를 지원했다. 이를 이용해 모든 에디터가 로딩이 될 때마다 제목 Input에 포커스를 주고, 스크롤을 올렸다.
이렇게 모든 문제가 해결된 줄..알았다.
문제 편집 페이지는 추가 페이지와 같은 인터페이스이지만 서버로부터 데이터를 받아 에디터에 세팅해주는 로직이 추가되어있다. 그래서 다시 페이지 스크롤과 포커스가 내려가는 현상이 나타났다.
그래서 API호출이 끝난 뒤 다시 맨 위로 올리는 작업을 했다. 처음에는 해결이 안된 것 처럼 보였는데, 팀원이 테스트 했을 때는 됐다. 왜 돼
문제는 캐시였다. 필자의 크롬은 캐시를 비활성화 했기 때문에 항상 API 호출이 에디터 로딩보다 빨랐다. 그렇기 때문에 에디터가 로딩 된 뒤 에디터의 ref로 값을 설정해주는 것이 아닌(ref.current?.getInstance로 사용했기 때문에 undefined) defaultValue로 들어간 상태값을 이용해 렌더링이 됐고, 그렇게 로딩이 되면 포커스가 이동되는 것이었다.
이렇게 되면 네트워크 상황에 따라 API호출이 먼저 끝날 수도, 에디터의 로딩이 먼저 끝날 수도 있기 때문에 두 상황 모두 올려주는 코드를 작성해야했다.
하지만 같은 작업을 두 군데 모두 작성하기는 싫었기 때문에 ref.current 가 모두 undefined 가 아닐 때, 그리고 problem 상태 값이 존재할 때 업데이트 하고 스크롤을 올리려고 했다. 그랬더니 문제 2를 만나게 되었다 ^ㅡ^
useEffect 함수 안에서 router.isReady의 값이 바뀌었을 때 재렌더링을 하는 로직을 당연하게 쓰고 있었다.