React 란 무엇인가.

<교육을 들으며 혼자 정리한 내용으로 지식습득을 목적으로 읽기에는 정확하지 않은 정보가 있을 수 있음>

 

React는 자바스크립트 라이브러리중 하나로 ui를 만들기 위해 사용된다.

 

React의 장점으로는 ui를 상태로 관리할 수 있다는 것인데

mvc 모델에서 데이터가 변경되면 컨트롤러에서 해당 데이터를 다시 가공 후 모델에 넣어 뷰에 넣어주는 것과 다르게

그냥 데이터만 변경되면 자동으로 화면에 갱신이 된다.

 

React의 ui 개념은 주로 가상돔 패턴을 말한다.

이를 설명하기 위해 먼저 브라우저의 단계를 살펴보면

1. html코드 파싱, 돔트리 생성

2. css코드로 cssom트리 생성

3. 두 트리 합쳐서 렌더트리 생성

4. 레이아웃 계산

5. 픽셀로 화면에 그려줌

과 같은 단계를 거치는데 이런 과정을 많이 반복하게 되면 당연 부하가 생길 수 밖에 없다.

 

가상돔패턴은 먼저 가상돔을 만들어 돔과 비교하고

여기서 바뀐 내용이 있다면 돔에 접근하는 것과 같이 필요할때만 접근을 하는 방식이다.

 

React에서 '엘리먼트'는 리액트 앱을 구성하는 최소의 단위로

React.createElement("h1", null, "hello world"); (h1태그를 가지고 콘텐츠로 hello world를 가지는 엘리먼트)

로 생성가능하다. 

 

그리고 이 엘리먼트는 돔 엘리먼트와는 다르게 일반 자바스크립트 객체의 값을 갖는다.

실제로 로그에 찍어보면 돔 엘리먼트의 경우 프로토타입이 돔 객체로 나오는 반면

리액트 엘리먼트는 그냥 오브젝트로 표현된다.

 

리액트 엘리먼트를 웹에서 동작하려면 가상돔이 돔api를 호출하도록 해야하는데

이 역할을 하는 것이 리액트돔 라이브러리다.

보통 웹 개발에서의 리액트 사용은 이 두 라이브러를 사용하는 것을 말한다.

ReactDom.render(리액트엘리먼트, 돔에 반영되는 위치 엘리먼트) 로 넣을 수 있다

 

이렇게 코드가 만들어지면 실제로 부모자식관계 확인도 어렵고 되게 코드가 복잡해지는데

이를 위해 jsx라는 확장문법을 사용한다.

jsx는 거의 마크업 문법과 비슷하고 이것을 쓰려면 바벨을 사용하여 자바스크립트로 문법을 변환시켜줘야한다.