[리액트 교과서] react?

이 글은 리액트 교과서를 보며 공부한 내용을 기록한 글입니다.

 

 

첫번째 프로젝트에서 풀스택(?)으로 일을 하며 든 의문점이 있다.

각자의 업무가 주어진 페이지에서 큰 틀 안에 자잘자잘한 코드를 작성하다보니

A업무단에서 쓰여진 코드가 B업무단에서 필요할때 그 코드를 복사 - 붙여넣기를 하다보니

고쳐야하는 부분이 생기면 어느 한군데에서 고치고 그걸 다시 복사 - 붙여넣기를 하는

너무나도 쓸데없는 짓을 반복하는 것이다. 

시간에 쫒겨 마구잡이로 일을 할 때는 그냥 지나쳤는데 끝나고 나니 현타가 몰려왔다.

이게 진정한 프로그래밍이 맞나? 생각하던 차에 다른 언어를 배우며 공부를 해봐야겠다 싶었다.

 

리액트는 효율적인 프론트엔드 개발을 위한 새로운 방법을 제시했다.

리액트는 강력한 UI 라이브러리다.

모든 기능은 물론 백엔드에 대한 비즈니스 로직까지 갖춘 컴포넌트를 간단히 추가할 수 있다.

 

그렇게 대단하다는 리액트

대체 리액트가 뭘까?

 

 

React는 자바스크립트를 이용해서 만든 UI 컴포넌트 라이브러리다.

* component - 요소, 부품

 

React는 선언형 스타일을 사용한다.

개발자가 UI 요소를 선언형 스타일로 작성한 후 뷰에 변경이 발생하는 경우 React가 알아서 갱신한다.

이것을 내부 상태 변화라고 부른다.

React는 내부적으로 가상 DOM을 사용하여 브라우저에 이미 반영된 뷰와

새로운 뷰의 차이점을 찾아내 상태 변경에 따라 뷰를 갱신한다.

 

기존의 jQuery를 생각해보면 개발자가 

Dom을 조작해 뷰의 갱신 과정을 명령형으로 하나하나 작성해야했다.

실제 Dom을 직접 조작하는 방법은 UI가 간단할 때는 문제가 없지만 Dom 트리의 많은 부분을 다루게 되면 한계에 봉착한다. 명령형으로 작성하면 선언형보다 함수 실행의 결과를 예측하기가 더 어렵기 때문이다.

 

+) 나의 경우에도 jQuery를 쓰다보니 상태 변화에 대해 한줄한줄 코드를 일일히 작성해야했는데 그럴때마다 

코드도 지저분해지고 한가지 기능을 빠뜨리는 등 실수가 잦았었다.

 

예를들어 <p> 요소에 입력한 문장을 해당 컴포넌트의 상태를 변경하여 늘리는 경우에는 요소 자체가 아닌 해당 문장만 갱신하다. innerHTML이라고 할 수 있다. 요소 전체 또는 서버 측 렌더링처럼 전체 페이지를 다시 렌더링하는 것에 비하면 성능이 뛰어나다.

 

리액트는 UI 라이브러리일 뿐이므로

어떤 형태의 백엔드나 프론트엔드 데이터 관리 라이브러리와도 함께 사용할 수 있다.

 

활용방법 예시이다.

- MVC의 V를 대체하는 UI 라이브러리로 기존 MVC 프레임워크와의 결합

- jQuery를 기반으로 서버 측 렌더링을 거친 애플리케이션에서 자동완성 등 일부 기능을 위한 UI 컴포넌트로 활용

- 대부분의 로직을 직접 처리하는 전통적인 방식의 백엔드에서 서버 측 렌더링 템플릿 라이브러리로활용

- React Native를 UI 라이브러리로 사용한 모바일 앱

- 여러 가지 렌더링 대상에 적용할 목적으로 사용하는 UI라이브러리

 

 

출처

리액트 교과서 - 아자트 마르단 지음, 곽현철 옮김