리엑트의 컨셉
컨셉1 - 리엑트는 컴포넌트들이다.
리엑트는 웹 UI를 만드는 라이브러리이다. 즉 리엑트는 컴포넌트들로 이루어진 UI 라이브러리이다.
컴포넌트는
- 서로 독립적이고 (independent)
- 잘 고립되어저 있으며 (isolated)
- 재사용이 가능해야 한다. (reusable)
리엑트의 컴포넌트들도 돔 트리처럼 트리형식으로 이루어져 있다.
컨셉2 - state와 render
리엑트는 상태가 변경이 될 때마다 어플리케이션 전체를 다시 렌더링한다.
state에 맞게 render함수에서 어떻게 렌더링할 건지 한번만 정리해 놓으면 리엑트가 알아서 상태가 변경되면 render함수를 호출해준다.
리엑트 컴포넌트의 생김새
- 리엑트에서 제공하는 Component라는 클래스를 상속(extends)한다.
- state : 컴포넌트에 들어있는 데이터를 나타내는 객체
- render : JSX로 작성되었으며 state에 변경된 사항이 있으면 render함수가 실행된다.
가상 돔트리 (Virtual DOM Tree)
컴포넌트의 상태가 변경이 되면 뷰를 새로 그리게 되는 방식으로 동작한다.
root컴포넌트에서 상태가 변경되면 모든 컴포넌트들을 새로 렌더링 하게 된다.
이렇게 상태가 변경될 때마다 모든 render함수가 호출되면 성능이 안좋아 질 것 같다고 생각할 수 있다.
하지만 리엑트에는 컴포넌트들이 가상의 돔트리 형태로 메모리상에 존재한다.
즉 리엑트의 모든 구조들이 돔트리에 업데이트 되는것이 아니라 이전의 가상 돔트리와 비교해서 변경사항이 있는 부분만 계산을 하여 돔트리에 업데이트를 한다.
console.log(noah(🍕 , 🍺)); // true