React를 깊게 공부 하기 vs 바닐라 자바스크립트로 SPA, Component 구현해보기

안녕하세요! 결론부터 말씀드리면, 저는 개인적으로 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

안녕하세요:) | 바닐라 자바스크립트로 저런 개념들을 구현할 줄 아는게 필수일까요? 필수는 아니지만 바닐라 자바스크립트로 한번 구현해보는 것 추천드려요! 두 가지 장점이 있는 것 같습니다. 1. DOM에 대한 이해: React만 사용해보면 DOM을 직접 조작할일이 드물기 때문에 DOM 구조 및 관련 함수를 이해하는데 도움이 됩니다. 2. SPA가 동작하는 방식을 로우 레벨에서 이해할 수 있음: 페이지 리로드 없이 라우팅 변경, root 태그만 있는 구조에서 컴포넌트를 렌더링하는 방법등 SPA를 직접 구현하면서 동작 방식에 대한 이해를 높일 수 있습니다. 프로그래머스 과제관에 가면 연습해볼 수 있는 문제들이 많습니다. React를 공부하면서 과제도 한번 해보면 좋을 것 같네요!

안녕하세요! 실무에서는 React와 바닐라 자바스크립트 모두 사용하고 있습니다. React는 컴포넌트 기반으로 UI를 구성하는 라이브러리이기 때문에, 기본적인 자바스크립트 문법과 바닐라 자바스크립트로 SPA를 구현할 수 있는 능력도 필요합니다. React를 더 깊게 공부하면서 동시에 바닐라 자바스크립트를 활용해서 SPA를 구현하는 것도 좋은 방법입니다. 두 가지 모두 장단점이 있기 때문에, 사용할 수 있는 기술 스택이 많아지면 더욱 유연하게 개발할 수 있습니다. 하지만 과제를 받았을 때, React로 프로젝트를 몇 개 정도 한 실력이라면, 바로 바닐라 자바스크립트로 SPA를 구현하기는 어려울 수 있습니다. 그래도 도전하고 싶다면, 관련된 자료들을 찾아보고 기본부터 차근차근 공부해보세요. 마지막으로, 어떤 기술을 사용하던지 개발의 기초는 항상 자바스크립트입니다. 기본적인 자바스크립트 문법과 개념들은 꼭 익혀두는 것이 좋습니다.