[React] 리액트의 개념

리액트란?? 

Model View Controller모델에서 View를 담당하는 UI라이브러리이다. 

 

프레임워크와 라이브러리의 차이?  

프레임워크는 웹어플리케이션을 제어하는 모든 흐름을 프레임워크가 담당한다, 

그러나 라이브러리는 어떤 기능을 하는 컴포넌트들의 모임으로 제어의 흐름은 개발자가 담당한다. 

앵귤러는 프레임워크이고, 리액트는 라이브러리이다. 

자바를 개발했던 경험으로 프레임워크와 import를 통해 불렀던 library를 비교를 해보자면, 

우리는 프레임워크를 사용하기 위해서 굳이 무엇을 하지 않는다. 

프레임워크를 설정하고 프로젝트를 생성하면 

프레임워크 구동에 필요한 설정, 소스들이 자동 생성되고 우리는 프레임워크 규칙에 맞춰 코드를 생성한다. 

프레임워크는 스캔을 통해 스스로 빈을 찾아 등록하고, 서버를 구동되면 컨텍스트를 찾아 알아서 웹을 실행하고 개발자가 구현한 기능맵핑해서 웹페이지에서 요청한 기능을 수행한다. 

반면에 라이브러리는 임포트를 해야한다. 어떤 경로의 라이브러리를 불러올것인지, 그 라이브러리의 어떤 기능을 사용할 것인지는 모두 개발자가 정한다. 

프레임워크는 일종의 자동차운전 같다. 우리는 자동차 내부에서 핸들을 돌리면 어떤식으로 바퀴가 돌아가는지 모른다. 하지만, 그저 자동차의 규칙 핸들을 왼쪽으로 꺾으면 좌회전이 되고, 오른쪽으로 꺾으면 우회전이 되는 것을 안다.

반면에 라이브러리는 자동차 액세서리같은 것이다. 네비게이션이나 블랙박스같이 우리가 선택해서 사용한다. 네이게이션마다 기능이 다르고 블랙박스도 원하는 위치에 달 수 있다. 

리액트의 구성 

리액트는 import/export를 통해 class로 구현된 UI component를 부르는 식으로 웹애플리케이션을 구성한다. 

처음 시작은 root이며, root에서 자식 component들이 트리형식으로 구성이 된다. 

component는 기본적으로 state라는 상태데이터와 render라는 렌더링을 위한 함수로 이뤄진다. 

리액트의 구동원리 

기존의 javascript에서는 정적 페이지 HTML을 작성하고 javascript로 DOM을 이용해 해당 HTML의 이벤트를 하나하나 개발자가 지정해 구현하는 형식이었다. 

그러나 리액트는 컴퍼넌트를 작성해서 페이지를 구성하는 방식이다. 컴포넌트에 변화를 줄 조건인 상태를 정의해놓고 상태에 따라 컴포넌트를 렌더링해 구성을 하도록 한다. 

뭐랄까 기존의 방식은 사람을 특정 위치에서 모집을 해놓고 하나하나 일을 지정해주는 것이다. 문쪽에 가까우니까 너는 문담당, 너는 주방에 있으니까 주방담당 

반면 리액트는 주방장이라는 역할을 만들고, 오늘의 요리를 지정한다음 주방에 배치해 요리를 하게 하는 흐름이다.

 

기존의 방식은 개발자가 모든 요소들을 파악한 후에 어떤 행동에 대해 어떻게 반응할 건지 하나하나 다 정해야했다. 

반면 리액트는 개발자가 요소를 우선 역할과 행동을 모두 지정해놓고 위치만 지정하면 된다.  

리액트의 성능 

리액트는 상태가 변할때마다 다시 렌더링을 한다. 

언뜻 생각해보면, 뭐 쪼그만 거 바꾸자고 전체를 다시 렌더링하면 자원이며, 성능이며 낭비가 아닌가 싶은데 

리액트는 다시 렌더링을 해야하는 요소들을 계산을 한다. 

형태적으로 바뀔게 없다면 해당요소는 제외하고 바꾸어야할 것만 바꾼다. 

리액트 만의 VDOM이라는 가상 DOM트리를 구성하고 여기서 렌더링을 산출해 구성한다. 

 

관련 사이트

https://reactjs.org/docs/getting-started.html

Getting Started – React

https://create-react-app.dev/docs/getting-started

Getting Started | Create React App