1. React 등장 배경

1-1. Web Application의 발전

• 오늘 날 우리가 사용하는 사이트에는 보이는 것(UI : User Interface) 와 할 수 있는 것(UX : User Experience) 이 많습니다. 뿐만 아니라 문서 작성, 쇼핑, SNS, 게임 등의 기능을 웹 브라우저 기능에서 활용할 수 있습니다.

• 이처럼 사용자가 별도의 응용 소프트웨어 (애플리케이션) 를 설치하지 않아도 웹 브랑주러를 통해 응용 소프트웨어의 기능을 이용할 수 있도록 만든 웹 서비스를 웹 애플리케이션(Web Application) 이라고 합니다.

• 과거에 비해 현재의 웹 애플리케이션은 동적이고 다양한 UI를 가지며, 카테고리 hover 이벤트, 좋아요 및 장바구니 기능 등 유저와의 상호작용이 많아지고 다루어야 할 데이터와 코드가 증가하게 되었습니다.

• 그래서 규모가 커지고 복잡한 웹 애플리케이션을 개발하며 생산성을 향상시키고, 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 프론트앤드 Framework(프레임워크)와 Libreary(라이브러리)가 등장하게 되었습니다.

1-2. Framework와 Library

• 프레임워크와 라이브러리는 복잡한 개발을 효율적으로 편리하게 하기 위해 다른 개발자들이 많들어 둔 코드라는 공통점을 가지고 있습니다.
• 차이점을 살펴보자면,

1. 프레임워크 : 다른 사람이 만들어둔 코드의 정해진 틀(frame) 속에서만 수동적으로 작업(work) 해야함.

2. 라이브러리 : 개발자가 작업을 진행할 때 필요한 기능을 찾고(library) 능동적으로 가져와서 사용할 수 있음.

1-3. React를 사용하는 이유

• Naver Vibe, Flipart, Instagram 등과 같은 웹 사이트들을 들어가보면 페이지 전환 같은 게 새로고침 없이 부드럽게 동작합니다.

• 이런 사이트들을 Single Page Application 이라고 하는데, HTML을 1개만 쓰고, 다른 페이지를 보여주고 싶을 때 HTML 부분만 갈아치워서 보여주기 때문에 부드럽게 동작합니다.

• 쌩 자바스크립트로만으로도 만들 수는 있지만 코드가 너무 길어지기 때문에 리액트라는 자바스크립트 라이브러리를 설치해서 사용하면 이걸 더 쉽게 만들 수 있습니다.

• HTML을 함수, array, object 이런 곳에 보관하고 재사용할 수 있기 때문에 큰 프로젝트 일수록 html 관리가 편리해집니다.
  

• React Native를 쓰면 같은 리액트 문법으로 모바일 앱개발도 가능합니다. 거기선 html, css 문법만 약간 다르게 쓰입니다.