[React] 스터디 1일차

<리액트를 다루는 기술>을 요약하고 동시에 제 나름대로의 생각이 담겨 있는 글입니다.

React의 기본

render 함수

render() { ... }

• render 함수가 컴포넌트의 생김새를 정의함.
• view가 어떻게 생겼는지, 그리고 어떻게 작동하는지에 대한 객체를 반환함
• render 함수를 통해 내부의 컴포넌트를 렌더링

React의 특징

Virtual DOM

DOM은 객체로 문서 구조를 표현하는 방법을 말한다. DOM 자체는 빠르지만 웹 브라우저의 규모가 커질 경우 DOM의 변화 -> 다시 CSS를 연산 -> 레이아웃 구성 -> 페이지 리페인트의 과정에서 로딩되는 데이터가 많아지므로 느려짐. -> 어떻게 할까? 에서 출발함.

Virtual DOM의 동작 방식

실제 DOM에 접근하는 대신에, 해당 DOM을 추상화한 자바스크립트 객체를 사용함. 이를 실제 DOM과 비교하여 업데이트 된 점(바뀐 점)만 반영하는 것.

라이브러리

React는 프레임워크가 아닌 라이브러리이다. 그리고 view에만 초점이 맞춰져 있기 때문에 다른 기능을 직접 구현해야한다. 그리하여...

장점

마음에 드는 라이브러리를 사용할 수 있다. 그리고, 다른 프레임워크나 라이브러리와 혼용이 가능하여 다양하게 활용할 수 있다.

단점

but, 라이브러리를 하나하나 다 배워야 돼서 효율적 활용에 오랜 시간이 걸린다.