1. 리액트 시작

1-1. 왜 리액트인가?

---

• 프론트엔드 사이드에서 규모가 큰 애플리케이션을 관리하기 위해 수많은 프레임워크 들이 존재
• 프레임워크들은 주로 MVC, MVVC, MVW와 같은 구조를 차용하며 모두 Model과 View를 가짐
  • Model, View, Controller

MVC

---

프로그램 개발할 때 Model, View, Controller를 나누어서 개발하는 개발 방법론이다

 

위의 사진과 같이 작동하며 일반적으로

1. User가 Controller에 요청
2. Controller가 Model에 반영
3. 반영된 Model을 View가 다시 그려서
4. User에게 보여주는

과정을 거치게 된다

View의 문제점

---

위와 같은 MVC패턴은 당연하게도 View를 변형시킨다

아래와 같은 JSON 객체를 보자

{ 'title': 'Hello', 'contents' : 'Hello World', 'author' : 'velopert', 'likes' : 1, } //위 값을 사용하는 뷰 <div id='post-1'> <div class='title'>Hello</div> <div class='contents'>Hello World</div> <div class='author'>velopert</div> <div class='likes'>1</div> </div>

여기서 User의 요청에 따라 likes 값을 2로 업데이트한다면 post-1을 찾아고 내부의 likes를 찾아서 내부를 수정해야된다

지금은 예시가 간단해서 매우 간단한 로직으로 구현할 수 있지만 앱의 규모가 커지면 성능도 떨어지고, 복잡해지는 문제를 가지게 된다

해결 방안

---

어떤 데이터가 변할 때 어떤 View를 찾아 바꾸는게 아니라 View를 싹 다 날려버리고 처음부터 새로 View를 그리는 방식을 고안해냈고 그러한 방식을 효율적으로 구현한 것이 바로 리액트이다

1-1-1. 리액트 이해

---

리액트는 위에서 말한 MVC, MVVC, MVW 구조를 가지고 있지 않고 오직 V(View)만 신경 쓰는 라이브러리이다

• 컴포넌트(component)는 리액트 내에서 특정 부분을 어떻게 View로 그릴지 정하는 선언체이다
• 사용자 화면에 View를 보여주는 것을 렌더링이라고 한다
• 리액트 컴포넌트는 최초로 실행될 때 초기 렌더링을, 후에 데이터가 변경되어서 실행될 때는 리렌더링을 한다

초기 렌더링

---

//render함수 render() {...} *위의 render함수는 초기 렌더링을 담당하며 해당 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다*

• render 함수는 객체를 반환한다

조화 과정

---

• 리액트에서 데이터 변화에 의한 업데이트를 업데이트로 부르기 보다는 조화과정(recondciliation)이라고 부르는게 더 정확하다

1. 컴포넌트의 render가 실행되어 초기 렌더링을 거쳤다
2. 컴포넌트의 데이터가 업데이트된다
3. 업데이트된 데이터를 가지고 컴포넌트가 가지고 있는 render함수를 호출한다
   • 여기서 호출된 render는 새로운 데이터를 가지고 어떻게 표현할지, 어떻게 작동할지를 나타내는 객체를 반환한다
4. 바로 DOM에 반영하지 않고 1번과 3번을 비교한 뒤
5. 달라진 부분만 새로 렌더링한다

1-2. 리액트의 특징

---

1-2-1. Virtual DOM

---

위에서 알아본 조화 과정의 3번째 단계에서 호출한 render로 받아온 객체가 바로 Virtual DOM이다

그리고 아래의 그림이 4번째 단계에서의 비교인데

 

오른쪽이 새로운 Virtual DOM이고 왼쪽이 1번 단계에서 초기 렌더링한 DOM 트리이다

이 둘을 비교해 업데이트될 노드를 찾고 그 부분만 새로 그리는 것이 리액트의 조화 과정이라고 할 수 있다

오해

---

리액트 메뉴얼에는 다음과 같은 문장이 있다

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기

눈치 챘겠지만 Virtual DOM을 사용한다고 해서 무조건 빠른 것은 아니고, 정적인 페이지에선 오히려 독이 될 수도 있다는 것

1-2-2. 기타 특징

---

리액트는 프레임워크가 아닌 라이브러리이다