이재승님의 '실전리액트 프로그래밍 리액트 훅부터 Next.JS까지'(출판사: 프로그래밍인사이트)의 3장을 읽고 정리한 내용입니다.
리액트는 UI 데이터를 관리하는 방법을 제공하는 UI 라이브러리이다.
UI 데이터란 컴포넌트 내부에서 관리되는 상태값과(state) 부모 컴포넌트에서 내려주는 속성값(props)으로 구성된다. 리덕스와 같이 전역 데이터를 관리해주는 라이브러리도 결국 컴포넌트의 state와 props를 이용해서 구현되는 것이다.
만약 UI데이터가 변경되면 화면을 다시 그려야한다. 만약 리액트와 같은 UI 라이브러리를 사용하지 않는다면 데이터가 변경될 때마다 돔요소를 직접 수정해야하고 이 과정을 거치다보면 코드가 매우 복잡해지지만 리액트를 이용한다면 화면을 그리는 모든 코드를 컴포넌트의 render함수로 작성하도록 했고 UI 데이터가 변경될 때 리액트가 render함수를 이용해 화면을 자동 갱신해주고 이것이 리액트를 사용하는 이유의 핵심이다.
리액트를 사용한 코드의 특징
같은 기능을 하는 코드를 리액트를 사용한 코드와 사용하지 않은 코드로 만들어 비교해보면
리액트를 사용하지 않은 코드는 화면을 어떻게 그리는지를 나타낸다면 리액트를 사용한 코드는 화면에 무엇을 그리는지 나타낸다. 전자는 명령형, 후자는 선언형 프로그래밍이라고 부르는데, 명령형 프로그래밍은 돔을 직접 수정하면서 화면을 어떻게 그리는지 구체적으로 나타내줘야하고 상당히 구체적이기 때문에 돔 환경이 아닌 모바일 네이티브 UI환경에서는 사용하기가 어렵다. 선언형 프로그래밍인 리액트는 무엇을 그릴지만 나타내면 되기 때문에 다양한 방식으로 그릴 수 있다. 돔 환경 뿐 아니라 모바일 네이티브환경에서도 표현이 가능하다.
선언형 프로그래밍은 명령형 프로그래밍보다 추상화 단계가 높고, 추상화 단계가 높을수록 비즈니스 로직에 집중할 수 있다는 장점이 있다.
