버츄얼돔
- 렌더링이란? html 요소 또는 React 요소의 코드가 눈에 볼 수 있도록 그려지는것
DOM은 왜 비효율적인가?
- 브라우저가 HTML 받으면, 브라우저는 DOM을 만들고 이 DOM을 바탕으로 각 노드들의 스크린 좌표를 구하고 어디에 나타낼지 레이아웃을 짠다. 이 과정은 동기적인 작업인데 DOM에 변화가 생길 때 마다 렌더 트리를 재생성하고 레이아웃을 만드는 과정이 모두 다시 반복되므로 비효율 적임.
Virtual DOM 렌더링 방식
- 리액트는 DOM을 직접 제어하는 대신 중간에 가상의 Virtual DOM을 만들어서 이걸 쓴다. Virtual DOM은 실제 DOM과 구조가 비슷한 리액트 객체 트리이다. 개발자는 직접 DOM을 제어하지 않고 Virtual DOM을 제어하고, React에서 적절하게 Virtual DOM을 DOM에 반영하는 작업을 한다.
- 즉 실제 DOM에 적용하기 전에 가상의 DOM에 먼저 적용시키고 그 최종적인 결과를 실제 DOM으로 전달하기 때문에 브라우저 내에서 발생하는 연산의 양을 줄일 수 있다.
리액트
- 웹/앱의 View를 개발할 수 있도록 하는 라이브러리
리액트의 특징
1) 선언형이다
2) 컴포넌트 기반으로 재사용성이 뛰어나다
3) 가상돔 기반으로 가볍다.
4) state와 props를 가짐
- 선언형 프로그램 - 목표를 명시하고 알고리즘을 명시하지 않음.(잘모르겠음) 이와 같은 선언형 특성은, 리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어 높은 생산성을 보장할 수 있도록 해준다.
- 컴포넌트 - 독립적인 단위의 소프트웨어 모듈을 말한다. 리액트는 웹에서 쓰는 각 요소를 컴포넌트로 만들 수 있게 해 기존의 UI를 다른화면에 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 높은 재사용성을 가진다.
리액트 컴포넌트
- 리액트의 컴포넌트는 개념적으로 props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React.Element 를 output으로 하는 함수이다. 따라서 합성을 이용하여 UI를 재사용할 수 있고 독립적인 단위로 쪼개어 생각할 수도 있게 한다. 컴포넌트는 React.Component를 상속받아 정의하지만 컴포넌트 간에는 상속보다는 합성을 사용하길 권장한다.
- UI를 구성하기 위해 화면에 컴포넌트를 그리고(Mounting), 갱신하고(Updating), 지워야(Unmounting) 한다. 컴포넌트는 각 프로세스가 진행될 때에 따라 Lifecycle 함수로 불리는 특별한 함수가 실행된다. 개발자는 이를 재정의하여 컴포넌트를 제어하게 된다.
- 요새 많이 쓰는 함수형 컴포넌트에선 useEffect로 비교적 간단한 라이프사이클을 사용한다. useEffect 사용시 componentDidMount 단계에 콜백이 실행되고, 두번째 인자로 배열에 넣어준 값이 변경될 때 componentDidUpdate 콜백 실행, 그리고 componentWillUnmount 단계에 cleanup함수가 실행 됨.
- 컴포넌트는 두가지 인스턴스 속성인 props와 state를 가진다. props는 컴포넌트의 mounting, updating 프로세스 시점에 값이 할당될뿐 컴포넌트 내부에서 값을 변경할 수 없다. 상황에 따라 변경되어야 하는 값들은 state를 쓴다.
- 왜 state와 props를 나눠서 설계했는가? 개발자에게 명확한 관념 모델을 제공한다. 관념모델은 무엇이 어떻게 동작하는지 이해할 때 진행되는 일련의 사고 프로세스를 의미한다. 즉, 논리적으로 이치에 맞는 사고 모델을 제공한다.
- 컴포넌트 간에는 무조건 props를 통해서만 데이터를 주고받고 props는 컴포넌트 내부에서 변경되지 않는다. 위/아래 양쪽에 대해 동시에 고민할 필요가 없고 아래 한쪽 방향과 자기 자신에 대해서만 고민하면 된다.
- state값을 그냥 변경하면 되지 왜 굳이 setState를 쓰는가? - 자바스크립트의 비교연산자는 피연산자의 값이 아닌 레퍼런스 값을 기준으로 참/거짓을 리턴하기 때문. state의 값을 직접 변경할 경우 레퍼런스 값 자체는 그대로이니까 state가 변경됨을 알 수 없다. 따라서 setState를 이용해 기존 state와 머지하여 state의 변경 가능성을 명시적으로 알려준다. 이를 통해 생성된 state의 레퍼런스값은 기존과 다르므로 컴포넌트에서는 shallow compare를 통해 변경되었음을 알 수 있다.
- setState는 즉시 state를 변경시키는 것이 아니라 비동기로 작동한다. 끊김없는 UI/UX를 제공하기 위해 일정 수의 render를 꼭 수행시키기 위함.
