면접 질문 중에 인상깊지만 생각보다 툭 튀어나오지 않았던 질문이었는데, 조금 더 머릿속을 정리해보려고 글을 작성한다. 내가 알고 있는 것에 대해 확실하게 짚고 넘어가고 부족했던 부분을 보충하는 것도 좋은 공부일 것 같다.
1. 리액트 특징
리액트, 생각 나는 특징을 나열하다보면 자바스크립트 라이브러리다, CSR방식이다, 페이스북 팀에서 만들었다. 정도인 것 같다.
아, Virtual DOM 형식으로 이루어져있어, 액션 업데이트 관리가 쉽다.
특히 기존 HTML을 따와 만들어진 DOM은 복잡한 구조로 이루어져 있어 무겁고 관리하기 복잡했다. 그런데 리액트 출시 이후 Virtual DOM을 이용해 상태가 변한 것만 이용해서 업데이트를 통해 변경할 수 있어 비교적 가볍고 관리하기 편해졌다.
또한 라이브러리의 특성 상 특정 프레임워크에 묶여 있는 것이 아니라 다양한 라이브러리를 내 선택에 따라 사용할 수 있다는 것도 특징이다.
2. 리액트 장점
1. JSX 방식으로 기존 자바스크립트를 사용하던 사람들도 어렵지 않게 사용할 수 있다. 또한 코드가 간략해지고 동적 코드를 사용할 수 있다.
2. React Native, NEXT.js 등의 다른 언어로도 사용과 확장이 가능하다. RN의 경우 모바일 앱을 만들 수 있고, NEXT는 SEO가 잘 되어있고, 빠른 로딩으로 요즘의 웹 트렌드와도 맞다.
3. 컴포넌트 사용으로 코드가 간략해지고 재사용성과 확장성이 뛰어나다.
4. 개발하기 편하다. 전에 사용하던 J-query도 기존에 길게 써야 했던 바닐라 자바스크립트에 대해 굉장히 간략화됐지만, 그거와 별개로 HMR이 안돼서 매번 새로고침을 해줘야 하는 단점이 있었고, Redux와 같은 상태관리도 지원하지 않아 불편했지만, React의 경우 HMR의 제공으로 개발할 떄 즉각적인 확인이 가능하고 Virtual DOM으로 상태, 액션 관리도 편하니 더할 나위 없다.
3. 리액트 단점
아무래도 SEO 문제와 느린 로딩 시간이지 않을까?
1. SEO의 최적화가 떨어진다. 사람들이 웹을 검색하면서 가장 상단에 나온 웹사이트를 위주로 들어가며 순서대로 들어간다. 나도 마찬가지고! 그런 점에서 표준 검색 최적화가 잘 되지 않는다는건 굉장한 단점인 것 같다.
2. 느린 초기 로딩 시간으로 한번에 모든 파일을 읽어나가기 때문에 초기에 로딩 시간이 오래 걸리며, 이런 상황은 구글 리서치 자료에서도 시간(그것도 초단위)당 웹페이지의 이탈율이 굉장히 높다는 것을 알려주는데 이러한 점이 리액트의 치명적인 단점이지 싶다.
4. 리액트를 사용하는 이유
당연히 장점만 있다면 좋겠지만, 단점도 있는데도 결국 리액트를 사용하는 이유가 뭘까?
단순히 정보를 얻어갔던 예전의 웹사이트와 달리 현재는 내가 직접 참여하는 웹사이트가 많아졌다. 당연히 그러는 만큼 상태 관리나 웹의 최적화도 중요해졌는데, 리액트가 J-query를 지나 이러한 점을 보완해줄 수 있는 언어인 것 같다. 또한 결국 사람이 사용하냐의 유무를 떠나 개발하는 사람의 개발 편의성도 정말 중요한 것 같은데, JSX나 HMR의 제공 등 개발 편의성도 상당히 높아져 시간의 흐름이 J-Query에서 리액트로 넘어간 것 같다.