[React] 리액트란 ?

개념정리

리액트란?	프론트앤드 라이브러리
사용하는 이유?	요즘의 웹은 단순히 웹 페이지 가 아니라, 웹 애플리케이션으로 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있다. 어떠한 유저인터페이스를 동적으로 나타내기위해서는 정말 수많은 상태를 관리해줘야한다. 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌다. ( 대표적으로 Angular, Ember, Backbone, Vue, React  ) - 상태 관리하기가 매우 편함
버츄어 돔이란?	DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능. => 성능 향상 가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고 DOM에 변경이 있을 때만 해당 변경을 반영합니다.  = 즉 : 이전 DOM에 있던 내용과 현재의 내용르 비교해 반영해주는 역할

 

리액트 시작하기!

1단계 컴포넌트별로 구별하기

  리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줍니다.

이유  분리되지 않은 코드는 가독성을 떨어뜨린다. 분리함으로서 관리의 효율을 높인다 = 너무 컴포넌트를 나누면, props값 전달하는게 아주 힘들어지니, 적당히 나누는게 중요한것 같음. 공통디자인에 조금씩 달라지는 부분들이 많길래 하나의 컴포넌트로 제작하고 상황에따라 props 를 넘겨줬더니 해당 컴포넌트가 엄청 복잡하고 더러워졌음

2단계 컴포넌트 생성하기

  class형 컴포넌트와 함수형 컴포넌트

class형 컴포넌트	함수형 컴포넌트
state 기능, 라이프사이클 기능을 사용할 수 있다 임의 메서드를 정의할 수 있다. render 함수가 꼭 있어야 하며, render 함수 내에는 보여주어야 할 JSX를 반환해야 한다. 최근에는 잘 안씀	클래스형 컴포넌트에 비해 선언하기 쉽다 메모리 자원을 비교적 덜 사용한다 state와 라이프사이클 API을 사용할 수 없다 리액트 v16.8 업데이트 이후 Hooks 기능이 도입되면서 해결 리액트 공식 매뉴얼에서는 함수형 컴포넌트와 Hooks를 사용하도록 권장

3단계 컴포넌트 내보내기

내보내줘야 다른곳에서 이 코드를 사용할 수 있습니다.   →  export default App(=이름);
어느정도 리액트에 익숙해졌다면, 확인해보면 좋은 정보 : export default와 export name의 비교

 

4단계 컴포넌트 불러오기

불러와야 사용할 수 있습니다.   →  import App from "./App"; 

 

개념 추가

Virtual DOM 

1. 개념

 DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능. => 성능 향상

가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고 DOM에 변경이 있을 때만 해당 변경을 반영합니다. 

(실제 DOM의 가벼운 사본)

리액드 사용 전리액트 사용 후

                              리액트 사용 전                                                      리액트 상용 후 

원래 브라우저의 workflow DOM Tree생성 → Render Tree 생성 → LAyout(reflow) → Painting  돔트리 생성 html을 전달받으면 렌더엔진이 이를 파싱하고 돔노드로 이루어진 트리를 만든다. ( 각 노드는 HTML과 관련이 있다.) // 파싱하다 :  어떤 데이터를 다른 모양으로 가공하는 걸 말합니다. 랜더트리 생성 외부 CSS파일과 각 엘리먼트 스타일을 파싱한다. 스타일 정보에 따라 돔트리에 따라 새로운 트리, 렌더트리를 만든다. 레이아웃 렌더트리가 다 만들어지고, 레이아웃 과정을 거친다. 각 노드들은 스크린 좌표가 주어지고 어디에 나타나야할 위치가 주어진다. 페인팅 트리의 각 노드들을 거쳐가며 paint() 메소드를 호출한다. 그러고 나면 스크린에 원하는 정보가 나타난다.

뷰만 바뀌는 경우, 가상 돔에 먼저 보여주고 최종적인 결과를 실제 돔으로 전달해줌 = 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선됨 실제 DOM에 업데이트 하는 절차 React에서 데이터가 변하여 브라우저 상의 실제 DOM에 업데이트 하는 과정은 3가지 절차를 밟습니다. 1.  데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링 합니다. 2.  이전 Virtual DOM에 있던 내용과 현재의 내용을 비교합니다. 3. 바뀐 부분만 실제 DOM에 적용이 됩니다. (컴포넌트가 업데이트 될때 , 레이아웃 계산이 한번만 이뤄짐) 즉 REACT는 지속해서 데이터가 변화하는 대규모 애플리케이션 구축 을 위해서 탄생하였습니다. 참고: DOM 조작의 실제 문제는 각 조작이 레이아웃 변화, 트리 변화와 렌더링을 일으킨다는겁니다. 그래서, 예를 들어 여러분이 30개의 노드를 하나 하나 수정하면, 그 뜻은 30번의 (잠재적인) 레이아웃 재계산과 30번의 (잠재적인) 리렌더링을 초래한다는 것이죠. 딱 한번만 한는거에요. 모든 변화를 하나로 묶어서. 그러면, 레이아웃 계산과 리렌더링의 규모는 커지겠지만, 다시 한번 강조하자면 딱 한번만 하는거에요. 바로 이렇게, 하나로 묶어서 적용시키는것이, 연산의 횟수를 줄이는거구요. 마지막으로, DOM 관리를 Virtual DOM 이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM 을 조작할 것 이라던지, 이미 조작했다던지에 대한 정보를 공유 할 필요가 없습니다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어줄 수 있다는거죠.

 

컴포넌트

1. 개념

  코드상 기능 화면단위로 묶어서 구분하는것으로 예로는 버튼, 브레드 스크럼등의 기능들이 있다. ( 보통 컴포넌트 하나에 html + js + css가 묶여서 대응)

그러나 어떤 것들을 컴포넌트로 만들어야할 지 어떻게 알 수 있을까요?

그냥 새 함수나 객체를 만들 지 말 지 결정하는 기준을 그대로 적용하세요.

그런 테크닉 중 하나는 단일 책임 원칙 (single responsibility principle) 이며, 이는 컴포넌트가 한가지의 작업만 하는 것이 이상적이라는 것입니다.

참고 ( https://reactjs-kr.firebaseapp.com/docs/thinking-in-react.html )