리액트란 무엇인가?

필자는 리액트를 공부한 지 하루밖에 되지 않았기 때문에 굉장히 낯설었습니다. 그래서 리액트라는 녀석이 어떤 툴인지 아는 것이 중요했어요. 현재 프런트엔드 개발에는 3 대장이라 불리는 자바스크립트 프레임워크(라이브러리)가 있는데, 가장 먼저 출시된 앵귤러(Angular) 그리고 오늘부터 알아볼 리액트(React) 마지막으로 이 두 녀석의 장점만을 가져오기 위해 노력하 Vue.js. 개인적으로 필자는 주니어 개발자이기 때문에 러닝 커브가 상대적으로 낮은 Vue.js를 선호하긴 합니다. 그러나 워낙 시장에서 React를 요구하는 기업이 많다 보니 이직을 위해서라도 리액트를 천천히 공부해 볼 생각에 기술 블로그를 작성해보기로 하였습니다.

---

리액트란 무엇인가?

공식문서를 살펴보니 한 문장으로 정의해주었습니다.
React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리. React는 Facebook에서 개발하고 오픈소스로 제공해주는 프런트엔드 라이브러리라고 볼 수 있겠습니다.

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

리액트는 SPA(Single Page Application)으로 말 그대로 HTML 파일이 한 개만 존재하고, 수많은 컴포넌트 파일이 EndUser의 요청대로 화면이 전환되는 웹/앱의 View를 개발할 수 있도록 도와주는 기능을 하는 도구라고 이해하면 좋을 것 같다. 전 세계에서 현재 가장 인기 있는 화면 개발 라이브러리입니다.

React의 필요성?

리액트가 어떤 것인지 아주 간단하게 살펴봤는데, 그렇다면 리액트라는 기술스택이 왜 필요한 것일까?
React를 사용하지 않아도 HTML, CSS, JavaScript를 이용해서 웹 페이지를 만들 수 있다. 그러나 서비스가 커짐에 따라 소스코드의 양이 방대해지고, 코드가 관리가 어렵게 되었습니다. 그래서 리액트를 이용해 사용자와 상호작용할 수 있는 동적인 UI를 쉽게 만들어 코드도 재활용하고, 웹 페이지를 보다 효율적으로 유지 보수하고 관리할 수 있도록 하기 위함입니다.

동적 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말하는데 즉, 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 전달받게 됩니다. 동적인 페이지가 주를 이루는 요즘, 웹 페이지라기보다, 웹 애플리케이션이라는 용어가 더 어울릴 정도로 유저 인터랙션을 처리하기 위한 상태 변화가 상당히 많아졌습니다. 이를 자연스러운 유저 인터페이스로 만들어주기 위해서 프런트 앤드 라이브러리 / 프레임워크가 등장하게 된 것이라고 하네요.

정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 기업을 소개하는 페이지라면, 단순히 기업 정보를 전달하기 위한 목적이기 때문에 유저의 인터랙션은 중요하지 않은 요소로 볼 수 있습니다. 이런 경우엔 단순히 HTML과 CSS의 구성만으로도 충분히 멋진 웹 페이지를 만들 수 있습니다.

---

SSR vs CSR

리액트뿐만 아니라 뷰, 앵귤러와 같은 다른 툴을 공부할 때도 마찬가지이겠지만, 빼놓을 수 없는 게 SSR과 CSR이 무엇인지 브라우저 작동방식이라 하긴 뭐하지만 브라우저 작동원리에 대해 알아봐야 하는데 이것은 다음 포스팅에서 알아보도록 하겠습니다. 

 

* 아래 포스트에 정리해놓았습니다.

 

https://sungjaecloud.tistory.com/290

Vue.js 02 - Vue.js란 무엇인가?