안녕하세요!
결론부터 말씀드리면, 저는 개인적으로 React를 더 깊게 공부하는데에 우선순위를 두라고 말씀드리고 싶습니다. (물론, Vanilla JS로 SPA를 구현해보는 것이 중요하지 않다는 의미는 아닙니다.)
아마 잘 아시겠지만, React에서는 react-router-dom이라는 라이브러리를 사용하면 손쉽게 SPA를 구현할 수 있는데요, 해당 라이브러리를 쓰면서 실제로는 라우팅이 어떤 방식으로 진행되는지 전혀 모른다면 문제가 될 수 있겠지만, 예컨대 다음와 같이, "anchor 요소가 클릭됐을 때, 기본적으로 동작하는 URL 이동 event를 event.preventDefault()를 통해서 막고, 그 대신 브라우저 window.history 객체의 pushState 메서드를 통해 URL을 관리하면서 DOM의 innerHTML 속성을 통해 브라우저단에서 페이지를 렌더링한다." 정도의 흐름만 이해하고 넘어가셔도 React를 중급이상으로 사용하시는데에는 큰 무리가 없을거라 생각하고 있습니다.
또한, 회사, 면접관들마다 조금씩 차이가 있겠지만, 아무래도 "React 중급 + Vanilla JS로 구현한 SPA의 동작 원리만 이해한 사람" vs "React 초급 + Vanilla JS로 SPA를 직접 구현 가능한 사람" 중에 한 사람만 뽑는다면 전자가 좀 더 유리하지 않을까 조심스레 생각하고 있습니다.
더불어 제 개인적으로 React를 중급이상으로 사용할 수 있다는 것은
1. React의 라이프 사이클은 어떻게 되는지
2. React의 렌더링 과정은 어떻게 되는지
3. 컴포넌트가 (리)렌더링되는 조건은 무엇인지
4. (함수형 컴포넌트에서) useState, useEffect, useRef, useCallback, useMemo, useContext, useLayoutEffect를 어디서 왜 사용하는지
5. React.memo를 어디서 왜 사용하는지
6. 재사용가능한 컴포넌트는 어떻게 잘 만들 수 있을지
등등에 대해서 충분히 이해하고 있을 정도라고 생각하며, 위에 나열한 것들을 잘 이해하고 사용하기 위해서 Vanilla JS로 SPA를 구현할 줄 아는 것이 큰 도움을 줄 것 같지는 않습니다.
따라서 Vanilla JS로 SPA를 직접 구현해보는 것은 React를 좀 더 잘 다루게 되고 나서 진행하셔도 늦지 않으실 것 같구요, 아래 링크는 Vanilla JS로 구현한 SPA의 동작 원리를 이해하시는데 도움이 되실 것 같아서 참고하시라고 함께 남겨두겠습니다.
https://nukw0n-dev.tistory.com/34
https://www.zerocho.com/category/HTML&DOM/post/599d2fb635814200189fe1a7