바닐라 js를 이용한 to-do list web을 만드는 토이프로젝트를 끝냈으니 이제 리액트를 공부해봅시다!

앞으로 '리액트를 다루는 기술'이라는 책을 읽으며 실습과 함께 이론적인 부분을 다뤄보아요 : )

📖 리액트 시작

1.1. 왜 리액트인가?

• js 만을 이용해도 규모가 큰 애플리케이션을 만들 수 있음. 그러나 대형 애플리케이션을 도구 없이 js 만으로 관리하기는 힘듦.
• 지금까지 Angular, Backbone.js, Derby.js와 같이 다양한 프레임워크가 이 문제를 해결하기 위해 노력함.
• 이 프레임워크들은 MVC , MVVM, MVW 아키텍처를 사용.
• MVC , MVVM, MVW의 공통점은 모델과 뷰가 있다는 것.
  • 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역
  • 뷰 : 사용자에게 보이는 부분
    -> 프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회, 수정하고 변경된 사항을 뷰에 반영.
• 페이스북 개발팀은 데이터가 변할 때 어떤 변화를 줄지 고민하지 않고 그냥 기존 뷰를 날리고 처음부터 새로 렌더링 하는 방식을 고안.
  • 이처럼 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 React
    
    

1.1.1. 리액트의 이해

리액트는 오직 view만 신경 쓰는 라이브러리.

• 컴포넌트 : 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체
  • 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의.
• 렌더링 : 사용자 화면에 뷰를 보여주는 것.

1.1.1.1. 초기 렌더링

맨 처음 어떻게 보일지를 정하는 것이 초기 렌더링.

• render(){...} 함수를 이용하여 렌더링. 이 함수는 컴포넌트가 어떻게 생겼는지를 정의.
• 먼저 문자열 형태의 HTML코드를 생성한뒤-> DOM에 해당 내용 주입=> 이벤트 적용
  
  

1.1.1.2. 조화 과정

1. 컴포넌트는 데이터를 업데이트 하면 새로운 데이터를 가지고 render함수를 호출.
2. 그 데이터를 지닌 뷰를 생성.
3. 이전의 render함수가 만든 뷰와 최소한의 연산으로 비교.
4. 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트

1.2. 리액트의 특징

1.2.1. Virtual DOM

• DOM은 document object model의 약어. 즉, 객체로 문서 구조를 표현하는 방법.
• 웹 브라우저에서 DOM에 변화가 일어나면 CSS를 다시 연산하고 페이지를 리페인트 하면서 시간이 허비됨.
• 따라서 리액트는 Virtual DOM 방식을 사용하여 DOM 처리 횟수를 최소화함.
  1. 데이터를 업데이트하면 전제 UI를 Virtual DOM에 리렌더링.
  2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교.
  3. 바뀐 부분만 실제 DOM에 적용.
  

리액트는 프레임워크가 아닌 라이브러리!
리액트는 정말 뷰만 신경쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야함 !!!

✔ 마치며

다음 포스팅에서는 JSX에 대해 공부하는 시간을 가져보겠습니다. 😊