3. React

키워드

• React란?

• React 컴포넌트

• React 리렌더링

• IoC(Inversion of Control)

• Library vs Framework

리액트

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

UI 런타임으로의 React

호스트 트리

리액트는 시간이 지남에 따라 변화할 수 있는 트리를 출력함

그 트리는 DOM이나 ios와 같이 외부 호스트 환경의 일부이기 때문에 호스트 트리라고 부름

호스트는 자체적인 명령형 API가 있음

React는 복잡한 일을 하는 호스트 트리를 예측할 수 있게 조작하는 프로그램을 작성하는데 유용

호스트 객체

• 호스트 트리는 노드(호스트 객체)로 구성됨

• 호스트 객체는 고유한 속성을 가지고, 다른 호스트 객체를 포함할 수 있음

• 일반적으로 호스트 객체를 조작하는 API가 있는데, 이것을 직접 호출하지 않고 React가 처리함

ex)

• DOM 환경의 DOM 노드 document.createElement('div')

• domNode.className 같은 속성을 가짐

• appendChild, removeChild, setAttribute 같은 DOM API가 제공됨

렌더러

React가 특정 호스트 환경과 통신할 수 있도록 하고, 호스트 객체를 관리

ex) React DOM, React Native

렌더러의 두가지 모드

1. 변경 모드 : 노드를 만들고 속성을 설정한 다음, 노드를 추가하거나 제거할 수 있음 (DOM 작동 방식)

2. 영속 모드 : appendChild() 같은 메서드를 제공하지 않고 부모트리를 복제한 뒤 항상 최상위 하위를 대체

엘리먼트

• 리액트의 가장 작은 구성 요소 (DOM Node 같은 호스트 객체)

• 리액트 엘리먼트는 화면에 무엇을 그리고 싶은지에 대한 정보가 담겨있는 자바스크립트 객체

• 엘리먼트는 영속성을 가지지 않음(매번 새로 만들어지고 버려짐)

• 엘리먼트는 불변함(엘리먼트를 수정하고 싶다면 새로운 엘리먼트를 생성)

진입점

호스트 객체 내부에 특정 React 엘리먼트 트리를 렌더링 할 수 있게 해주는 API

ReactDOM.render(reactElement, domContainer)는 domContainer의 호스트 트리를 reactElement로 바꿔줌

ReactDom.render를 사용하면 내부에서 아래와 같이 엘리먼트를 생성하고 속성을 설정함

 let domNode = document.createElement(reactElement.type);
  domNode.className = reactElement.props.className;

컴포넌트

• UI의 빌딩 블럭

• UI를 재사용 가능하게 하고, 모든 UI는 컴포넌트로 구성됨

• 마크업을 리턴하는 자바스크립트 함수

• 함수명은 항상 대문자로 시작

리렌더링

• 렌더링 : 이미지를 생성하는 과정

• DOM : HTML을 통해 웹사이트 화면에 표시되는 내용을 표현하는 것

• 자바스크립트는 API를 통해 DOM을 수정할 수 있음

• 리액트는 애플리케이션의 변경상태를 VDOM(virtual dom)에 먼저 적용

• VDOM이 업데이트되면 리액트는 이전 VDOM의 스냅샷과 비교하여 필요한 부분만 DOM만 업데이트

• 실제 DOM업데이트는 느리기 때문에 가능한 적은 범위만 업데이트 해야 효율적

재조정

• DOM을 효율적으로 업데이트하기 위한 방법

• 리액트는 트리의 같은 위치에 있는 엘리먼트 타입이 이전 렌더링과 다음 렌더링 사이에 일치하면, 기존 객체를 다시 사용(속성만 변경)

리액트는 언제 리렌더링 되는가

• 컴포넌트의 상태가 변경될 때

• 상태가 변경되면 컴포넌트의 render함수가 호출되고, props 변경 여부와 관계없이 모든 하위 컴포넌트들이 리렌더링 됨

• 애플리케이션이 제대로 구조화되어 있지 않은 경우, 상위노드를 업데이트하면 모든 자식들의 render함수가 실행되기 때문에 비효율이 발생할 수 있음

제어의 역전(IoC, Inversion of Control)

• 개발자가 작성한 객체나 메서드의 제어를 개발자가 아니라 외부에 위임하는 설계 원칙

• 프레임워크는 제어의 역전 개념이 적용된 대표 기술

Library vs Framework

• 라이브러리를 사용하는 것은 프로젝트의 일부로 라이브러리를 가져와 우리가 직접 제어하는 것

• IoC는 우리의 코드가 프레임워크의 일부가 되어 프레임워크에 의해 제어되는 것

• 어플리케이션의 제어 책임이 프로그래머에서 프레임워크로 위임되므로, 개발자는 핵심 비즈니스 로직에 더 집중할 수 있음

리액트에서 제어의 역전

• 리액트는 컴포넌트 호출 제어권을 가짐

• 우리가 컴포넌트 함수를 직접 호출하지 않고 리액트를 통해서 호출하기 때문에 리액트가 주는 재조정등의 이점을 누릴 수 있음