React 01 - React란 무엇인가?

18 Dec 2023

어떤 데이터가 변할때마다 어떤 변화를 줄지 고민하는 것이 아니라 기존 뷰를 날려 버리고 처음부터 새로 랜더링하는 방식을 사용한다. CPU점유율이나 느린 DOM을 이용한 효율이나 메모리를 많이 사용하게 되는데 이것을 최대한 효율적으로 사용할 수 있게 한다.

컴포넌트(Component) - 특정 부분이 어떻게 생길지 정하는 선언체, 재사용이 가능한 API로 수많은 기능들을 내장하고 있고 생김새와 작동방식을 정의할 수 있다.
렌더링(Randering) - 사용자 화면에 View를 보여주는 것
- 초기 랜더링 리액트 에서는 처음 어떻게 보일지를 정하는 초기렌더링이 필요한데. 이를 다루는 함수 render함수가 있다.
```
render() {}
```
  이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. html형식의 문자열을 반환하지 않고 View가 어떻게 생겼고 어떻게 작동하지는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있고, 내부에 있던 컴포넌트들도 재귀적으로 렌더링한다. render 함수를 실행하면 html 마크업을 만들고 이를 실제 DOM에 주입하여 렌더링한다. 데이터의 변화가 있을 때 화면을 업데이트 쳐줘야하는데, 실제로는 업데이트라는 말보다는 조화 과정(reconciliation) 이라고 한단다.(~~입에 안붙는다..~~)

이 과정은 위에서 말했듯이 View가 변형되는 것 처럼 보이지만, 실제로는 새로운 요소로 갈아끼우는 것이다.

이전 DOM트리와 새로 구성된 DOM트리를 비교해서 최소한의 정보만 조화 과정을 거치는 것이다.

데이터를 업데이트 하게되면 가상 DOM트리에 리렌더링을 한다. 원본 DOM 트리와 비교하여 바뀐 부분만 실제 DOM에 적용한다.

리액트는 오직 View만 담당한다. 그렇기 때문에 프레임워크가 아니라 라이브러리로 보는 것이 맞다. Ajax, Routing 이런 것들은 직접 구현을 해야한다.

이제 실제 리액트 설치를 진행해보자!

if(재능이 없으면 시간으로 극복하라){return 성공;}