[07-React] 1. React 개요

1. DOM 조작의 변화

1.1 "직접" 조작 - Javascript

: js를 통해 DOM을 변경하여 view에 영향

: 각 WB에 맞는 코드를 작성해야 했음(각 WB의 JS엔진 구성에 따라 문법 수행이 다르기 때문)

• 단점
  1) Hard to Manage : DOM 요소를 매번 선택 및 조작 -> 개발자의 어려움
  2) Repetitive : DOM 요소의 상태가 바뀔 때마다 이뤄지는 반복적인 Rendering -> 상호작용이 많을 경우 보기 불편

---

1.2 "간편" 조작 - JQuery

: JQuery는 Javascript 라이브러리로 이를 통해 DOM조작을 간편하게 할 수 있음

• JQuery를 통해 DOM 요소 선택, 조회 및 수정 가능
• But, 상태 변화에 따른 반복적인 Rendering은 아직도 단점으로 존재

: 추가적으로 브라우저 호환성을 지원하여 크로스 브라우저가 가능하도록 함(-> 1개의 코드로 다양한 JS엔진 지원)

---

1.3 "간접" 조작 - React

: React는 Javascript 라이브러리(일부는 프레임 워크로 분류)를 통한 DOM 간접 조작

: VDOM 개념을 도입하여 상태 변경에 따른 DOM 업데이트를 단일 DOM적용 가능(전체 업데이트가 아닌 해당 DOM만)

---

 

2. React의 장점

1. 명시적 상태 변경
   : 단뱡향 바인딩을 통해 상태 변화의 책임을 명확하게 알 수 있다.
   : 양방향 바인딩에 비해 데이터 흐름의 변화가 단순하여 코드를 읽기 쉽고, 버그가 적게 일어나는 편..
2. 배우기 쉽고 간결
   : JSX(JS + HTML)이라는 특이한 문법을 통해 일반적인 러닝 커브가 짧음
   
   
3. 기술 레퍼런스 혹은 커뮤니티의 사이즈
   : 정보 및 패치의 생산 주기가 높을 수록 라이브러리 성숙도 및 퀄리티가 높은데, 리액트는 이를 만족

---

3. 결론

: DOM 조작의 방법에 따라 여러 갈래로 나뉜 것 중, 간접적인 조작을 할 수 있는 React 등이 생김

: 페이스북과 같이 단일 요소들에 대한 반복적인 상태 업데이트가 일어나는 곳에서 VDOM을 통해 해당을 타깃하여 업데이트 및 한번에 리페인트 가능

: 능수능란하게 사용하기는 어렵지만 기본은 배우기 쉬워 접근성이 좋음

: 위의 장점들을 바탕으로 많은 사용자를 모아 라이브러리 성숙도와 퀄리티가 좋고 얻을 수 있는 정보의 풀 또한 매우 넓음

 

진짜 결론 : 리액트가 짱이다.. 근데 next가 더 짱아님?

 

---

참조

ASAC 수업자료

모던 리액트 Deep Dive