라이브러리

리액트는 세간에 프레임워크라는 얘기도 종종 들리지만 사실은 view를 담당하는 자바스크립트의 라이브러리 중 하나입니다.

프레임워크란 자체적으로 여러가지가 구비 되어 있어 필요한 부분을 사용하는 개념이고,
라이브러리는 필요에 따라 다른 모듈을 추가해 사용해야 하는 개념입니다.

예를들어 리액트를 사용할 시에 react-router-dom이 그 예가 되겠습니다.

state와 props

리액트를 처음 배울 때 가장 헷갈렸던 개념 중 하나가 바로 state와 props에 대한 개념입니다.
지금이야 함수형 컴포넌트가 대세가 되어 this.state와 같은 문법을 사용하지 않고 있지만
클래스 컴포넌트 시절에는 this.state, this.prop 같은 문법을 사용하곤 했죠.

모든 컴포넌트(화면을 구성하는 단위)들은 state와 props를 가지고 있습니다. state는 현재 컴포넌트가 가지고 있는 상태들이고, props는 다른 컴포넌트로부터 받은 state라고 하면 이해하기 쉬울 거 같습니다.

Virtual DOM

DOM이란 Document Object Model의 준말로써 프로그램 페이지의 구조, 그리고 그 스타일과 구조를 읽어 조작할 수 있는 API를 뜻합니다. DOM은 HTML 문서의 객체 기반 표현 방식이기 때문에 노드 트리로 표현됩니다. DOM은 HTML을 이용하여 실제로 나타내지는 화면의 인터페이스입니다.
노드 트리란, 하나의 부모가 여러 자식들을 가질 수 있는 트리 구조를 말합니다.

리액트는 Virtual DOM(가상 돔)이라는 기능을 가지고 있어 빠른 랜더링이 가능합니다.
본래 DOM에서는 하나의 변경이 일어나면 전체 랜더링을 하는 반면 가상 돔을 사용하는 리액트에서는 하나의 사본을 본 뜬 가상 돔과 전체 돔이 비교된 뒤, 변경된 부분만 랜더링 되는 마법이 일어납니다.

Component

위에서 컴포넌트를 화면을 구성하는 단위라고 정의했습니다. 컴포넌트의 본 뜻은 독립적인 단위의 소프트웨어 모듈입니다. 하나의 독립적인 부품인 셈입니다. 리액트의 핵심은 이 컴포넌트에 있습니다. 동일한 화면의 UI를 독립적인 부품으로 만들어 재사용하는 것입니다.