React

 

React 란 ? 

React는 유저 인터페이스 구현을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리

 

Virtual DOM 

- React는 실제로 DOM을 제어하는 방식이 아니라 중간의 가상의 DOM 인 Virtual DOM 을 두어 DOM 을 직접 제어하지 않음으로써 편의성과 성능을 개선했다. 

 

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

- DOM 에 업데이트 하는 절차 

1. 데이터가 업데이트 되면 전체 UI 를 Virtual DOM에 리렌더링
2. 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교
3. 바뀐 부분만 실제 DOM 에 적용 ( 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이뤄짐) 

- 렌더링

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

1. ReactDOM.render() 함수 호출하면 Virtual DOM 만들기 시작
2. ReactCompositeComponent (컴포넌트 생성) / ReactDOMComponent (DOM 만들 때 생성) 객체 생성
3. render() 함수가 생성한 컴포넌트 React 컴포넌트에 마운트 하기 위해 ReactReconciler.mountComponent() 메소드 호출
4. (이때, ReactCompositeComponent / ReactDOMComponent 객체의 mountComponent() 메소드 호출하여 이 시점에 주요 작업 시작)

ReactCompositeComponent 객체의 주요 작업

• constructor() 메소드 실행
• componentWillMount() 메소드 실행
• 렌더링 실행
• 배치 처리 작업에 메소드나 속성 등록  
  • componentDidMount() 메소드가 있으면 componentDidMount() 메소드 등록 

• 하위 ReactComponent 객체가 있으면 ReactComponent 객체를 생성하고 다시 ReactReconciler.mountComponent() 메소드 실행

 

이 후, Header 컴포넌트와 TODOList 컴포넌트, Footer 컴포넌트가 ReactCompositeComponent 객체로 생성되는 작업이 시작

자식 컴포넌트로 내려가면서 ReactDOMComponent 객체와 ReactCompositeComponent 객체의 주요 작업을 반복적으로 실행하며 Virtual DOM을 생성한다.

 

Virtual DOM 이 완성된 후 등록된 배치 처리 작업 실행

• ReactReconcileTransaction 객체 
  
  • componentDidMount() 메소드를 실행한다(componentDidXXX() 메소드 실행 시점에는 DOM에 접근할 수 있다). 
  • 기본 이벤트를 등록한다. 
  • 추가한 이벤트를 등록한다. 
  • ref 속성 추가 등 기타 작업을 실행한다.

• ReactDefaultBatchingStrategy 객체 
  
  • componentWillMount() 메소드와 componentDidMount() 메소드에서 상태를 변경했다면 이 시점에 상태를 갱신하는 작업이 시작된다

 

- Virtual DOM 갱신

 

 

* 주의할점*

Life Cycle의 메소드인

componentWillMount() 메소드

componentDidMount() 메소드

componentWillUpdate() 메소드

componentDidUpdate() 메소드

 

가 컴포넌트에서 실행될 때 state를 변경하면 변경 작업이 바로 반영되는 것이 아니다. ❗️❗️❗️

해당 컴포넌트를 변경 대상 컴포넌트로 등록하고 Virtual DOM을 갱신하는 배치 처리가 다시 시작된다.

→ 이 작업은 고비용 작업이기 때문에 componentWillMount() 메소드와 componentDidMount() 메소드에서 state를 변경하는 것에 대해서 고민해야 한다.

• 만약 componentWillMount() 메소드에서 state를 변경해야 한다면 컴포넌트의 생성자에서 처리하는 것이 좋다. 
• componentDidUpdate() 메소드에서 Virtual DOM을 갱신한다면 무한 루프에 빠질 수 있으니 조심해야 한다.

 

*갱신 방법*

setState() 메소드 호출하여 해당 컴포넌트를 변경 대상 컴포넌트에 등록하여 갱신 

Redux 에서 처럼 스토어가 변할 때, 다시 최상위 컴포넌트의 render() 함수 호출하여 최상위 컴포넌트를 변경 대상 컴포넌트로 등록

 

 

Life Cycle 

 

mounting - 컴포넌트가 우리 브라우저 상에 나타난다는 것 의미

updating - 컴포넌트의 props 가 바뀌거나 state 가 바뀌었을 때, 부모 컴포넌트가 리렌더링 될 때 등등

unmounting - 컴포넌트가 브라우저 상에서 사라질 때 의미

 

constructor

• 컴포넌트 생성자 함수
• 컴포넌트가 새로 만들어질 때마다 이 함수가 호출된다.
• 우리가 만든 컴포넌트가 처음 브라우저 상에 나타나게 될 때 만들어지는 과정에서 가장 먼저 실행되는 함수
• 컴포넌트가 가지고 있을 state 초기 설정을 하거나 컴포넌트가 생성되는 과정에서 미리 해야할 작업을 constructor에서 처리

 

1. Mount

 

componentDidMount

• 컴포넌트가 마운트된 직후, 즉 트리에 삽입된 직후에 호출된다.
• DOM 노드가 있어야 하는 초기화 작업은 이 메소드에서 이루어지면 된다. 외부에서 데이터를 불러와야 한다면, 네트워크 요청을 보내기 적절한 위치 ! ( axios, fetch 등을 통하여 ajax 요청 등 )

 

 

2. Update

shouldComponentUpdate

• 컴포넌트를 갱신해야 하는지 개발자가 결정하는 메소드다.
• React에서는 동기화 작업이 자주 발생하는데, shouldComponentUpdate() 메소드를 어떻게 설정하냐에 따라 불필요한 비교 횟수를 줄일 수 있다.
• 기본적으로 shouldComponentUpdate() 메소드가 없으면, state가 변경될 때마다 컴포넌트를 갱신해야 한다고 React 에서 판단하고 Reconciliation 작업이 진행된다. 
• Reconciliation 작업 : Virtual DOM 만든 후 Virtual DOM과 DOM 을 비교해 DOM을 갱신하는 작업
• true 반환하면 아래 함수들 호출하여 업데이트에 따른 리렌더링 진행 / false 반환할경우 리렌더링 진행 X

 

ComponentDidUpdate

• 컴포넌트 업데이트 작업이 끝난 리렌더링 후에 호출되는 함수 

 

---

참고 : https://d2.naver.com/helloworld/9297403#ch1-2