React의 특징 정리: 정확하게 이해하고 사용하기
- React는 컴포넌트들이다.
- React는 데이터가 조금이라도 업데이트가 되면 (state나 관련된 props이 변하면) 전체적으로 어플리케이션이 다 re-render가 된다.
- 하지만 React자체의 Virtual DOM을 사용하기 때문에 실제로는 정말 업데이트 돼야 하는 것들만 DOM요소에 업데이트 된다. Virtual DOM이라는 메모라 상의 트리를 보관해놓고 있기 때문이다. (개발자도구에서 HTML파일을 확인해보면 전체 다가 아니라 해당 컴포넌트만 업데이트 되고 있는 것을 볼 수 있다.)
(* virtual 은 가상의 라는 의미이다. 가상의 DOM을 REACT내부에 가지고 있다가 실제로 업데이트 되는 것만 DOM에 전달하는 것이다.)
- Class component에서는 class안의 멤버변수들이 클래스가 만들어질때 한번만 만들어지고, render함수만 반복적으로 호출되는 반면에
함수는 class가 아니고 함수이기 때문에 컴포넌트가 변경이 되면 코드블럭 전체가 계속해서 반복해서 호출이 된다. function component는 props이나 state가 변경이되면 안에 있는 지역변수들 조차, 그냥 다 무한정 반복 되는 것이다.
그 말은, function은 업데이트 될때마다 안의 코드들이 계속해서 새로 호출되어지고, 새롭게 값을 계산하고 로직들이 다시 수행이 된다는 것이다.
하지만 function component에서 사용되는 hook api들은, 우리가 반복해서 코드를 실행해도 알아서 동일한 값을 메모리에 저장해놓기 때문에 우리가 걱정하지 않아도 된다.
- State vs Props
State: 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트.
컴포넌트 UI를 위한 데이터를 보관하는 오브젝트로, 이 state라는 오브젝트를 통해서 데이터에 업데이트가 발생하면 리액트가 자동적으로 우리가 구현한 render 함수를 호출한다.
Props: 컴포넌트 밖에서 주어지는 데이터.
가장 근본적인 이유는 컴포넌트의 재사용을 높이기 위해서이다. 상황에 따라 주어진 데이터를 받아서 그 데이터에 맞게 UI를 보여주기 위해서 사용 되어진다.
