Udemy의 React-The Complete Guide (incl Hooks, React Router, Redux) 강의를 바탕으로 작성된 글입니다.

리액트란 무엇인가요?

리액트는 자바스크립트 라이브러리로, 사용자 인터페이스를 만드는데 사용합니다. → reactjs.org

모바일 앱은 화면 전환이 원활하게 이루어져 상당히 반응이 좋은 사용자 경험을 제공합니다.

하지만 전통적으로 웹사이트들은 우리가 링크나 버튼을 클릭하면 그 요청이 서버에 전송되고 새로운 html 페이지가 브라우저로 보내져 화면에 보여집니다. 새로운 html 페이지가 로딩되는 동안 기다려야한다는 것입니다.

자바스크립트는 프로그래밍 언어로, 개발자들이 브라우저에서 어떤 로직을 실행할 수 있게 해줍니다. 브라우저에서의 이 로직의 좋은 점은 사용자들이 보는 것을 조작할 수 있다는 것입니다. 브라우저에서 자바스크립트는 DOM이라고 불리는 것을 조작할 수 있는데 이를 통해 html의 요소들이 화면에 렌더링됩니다. 우리는 이것을 자바스크립트로 조작할 수 있고, 새로운 html 페이지를 불러오지 않고 사용자들이 보는 것들을 변경할 수 있습니다. 사용자에게 뭔가 다른 것들을 보여주기 위해 새로운 html 페이지를 요청할 필요가 없으며 그것이 자바스크립트의 역할입니다.

React.js는 클라이언트 사이드의 자바스크립트 라이브러리로, 클라이언트 사이드의 자바스크립트 코드를 작성하는데 도움을 줍니다.

리액트는 왜 필요한가요?

자바스크립트는 명령형 접근방식을 따르기 때문에 작업할 때 모든 단계를 일일이 작성해야 합니다. 저수준의 코드를 실행해야 하고, 결국은 계속해서 되풀이되는 반복적인 작업을 하느라 시간을 낭비하게 됩니다.

리액트는 사용자 지정 html 컴포넌트가 사용자 지정 html 요소를 갖습니다. 따라서 단계별로 따라야 할 지침이 그리 많지 않습니다.

리액트는 응용프로그램을 작은 빌딩 블록과 작은 컴포넌트들로 분할하는 것에 관한 것으로 모든 빌딩 블록, 모든 컴포넌트들은 명확한 태스크를 갖고 있으며 코드는 유지 보수와 관리가 용이하도록 유지됩니다. 리액트에서 라이브러리는 코드를 조합해서 화면에 무언가를 렌더링하는 제일 중요한 작업을 할 것입니다. 그리고 이를 위해 placeholder와 융통성있는 몇몇 요소들을 제공합니다.

리액트는 최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있게 해줍니다. 그리고 고수준의 구문을 제공해서 선언형 방식, 선언형 컴포넌트 중심의 방식으로 코드를 작성합니다. 우리가 정의하는 것은 화면에 나타내고 싶은 것들이고, 리액트가 나머지를 수행합니다. 이런 이유 때문에 우리는 리액트같은 기술이나 프레임워크를 사용합니다.

싱글 페이지 애플리케이션(SPA)

리액트를 사용할 때 페이지의 일부가 리액트로 제어되기도 하지만, 전체 페이지를 제어하는 것이 더 일반적입니다. 이 말은 화면에 보이게 하는 모든 것들과 심지어 페이지 전환에도 리액트를 사용한다는 뜻입니다.

링크를 클릭하고 새로운 페이지를 로드할 때, 마치 페이지를 전환한 것처럼 사용자에게는 보이지만 실제로 서버로부터 새로운 html을 요청하지 않습니다. 이를 통해 좀더 매끄러운 UI와 더 나은 사용자 경험을 제공할 수 있습니다.

우리는 이것을 싱글 페이지 애플리케이션이라고 하고, 첫 번째 요청 후에 리액트가 화면에 표시되는 내용을 이어받아 제어하게 됩니다.

참고: React Alternatives(Angular, Vue)   바로가기