• 목차

1.1 왜 리액트인가?

한때 자바스크립트는 웹브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였어

• 하지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 할 뿐만 아니라 서버사이드 개발은 물론 모바일과 데스크톱 애플리케이션에서도 엄청나게 활약하고 있지
  • 예를 들어 슬랙, 아톰, 페이스북등 수많은 애플리케이션들이 자바스크립트로 개발되었어.

이런 대규모 애플리케이션을 순수하게 자바스크립트로만 관리하려면 너무 복잡하기 때문에 지금까지 많은 자바스크립트 프레임워크들이 이를 해결하려고 노력해왔어

• (Angular, Backbone.js, Derby,js 등등등...)

• 이 프레임워크들은 주로 몇가지 아키텍처로 애플리케이션을 구조화했어

  (아래 내용은 넘겨도 됨 / 리액트랑 상관 없으니까 MVC 아키텍처만 대충 정리하고 넘어감)

  • MVC(Model-View-Controller) 아키텍처

위와 같은 아키텍처들이 지닌 공통점은 Model과 View가 있다는 점이야.

• 프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영하는거지
• 반영하는 과정에서 보통 뷰를 변형하게 되는데 업데이트 하는 항목에 따라 어떤 부분을 찾아서 변경할지 규칙을 정하는 작업은 간단하지만 애플리케이션의 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능도 떨어지게 돼

이 문제를 해결하기 위해서 페이스북 팀이 하나의 아이디어를 고안해 낸거야!

• 그 동안 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민했다면
• 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링 하는 방식을 생각한거지
  • 이렇게하면 애플리케이션 구조도 간단해지고 작성해야 할 코드 양도 많이 줄어들어
  • 그런데 웹 브라우저에서 이런 방식대로 하려면 문제가 발생해
    1. CPU 점유율 증가
    2. 메모리 사용량 증가
    3. 사용자들이 인풋에 텍스트를 입력할때 기존에 렌더링된것은 삭제하고, 새로 렌더링하면서 끊킴현상 발생
    4. (결국 느리다는 소리)
• 이러한 문제들을 최대한 해결해 성능을 아끼고 편안한 UX를 제공하면서 구현하고자 개발한 것이 바로 리액트야!

1.1.1 리액트 이해

리액트는 자바스크립트의 라이브러리야

• 리액트는 사용자 인터페이스를 만드는데 사용해
• 구조가 MVC, MVW등인 [프레임워크]와는 달리 V(View)만을 신경쓰는 [라이브러리]이니 혼동하면 안돼.

컴포넌트?

• 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체야
  • 재사용이 가능한 API로 수많은 기능들을 내장하고있어
  • 또한 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의해