React란 무엇인가?
React is a JavaScript library for building user interfaces.
React는 페이스북에서 만든 UI 라이브러리입니다.
UI를 세부적으로 분할하는 경우, 외관과 기능이 존재합니다. 외관이란 HTML 또는 CSS로 만들어지는 문자 그대로의 외관을 나타냅니다. 기능이란 input의 문자수를 세거나 문자열을 서버에 전달하는 동작을 의미합니다.
원래 클라이언트 사이드 HTML은 외관을 만들고 자바스크립트를 사용해 기능을 정의합니다. 따라서 범용적인 부품을 만들더라도 HTML과 자바스크립트를 따로따로 추가해서 사용해야 하므로 관리하기 어렵다는 문제가 있습니다.
외관과 기능이 조합돼 있는 것을 컴포넌트라고 부릅니다.
React는 컴포넌트 기반으로 UI를 구성합니다. 컴포넌트는 재사용이 가능한 UI 조각입니다. React는 컴포넌트를 조합하여 복잡한 UI를 만들 수 있습니다.
React는 UI 기능만 제공한다. 따라서 전역 상태 관리, 라우팅, 빌드 시스템등을 개발자가 직접 구축해야한다.
우리는 API 통신이나 사용자 이벤트를 통해서 프로그램의 상탯값을 변경한다. 그리고 리액트가 변경된 상탯값을 기반으로 UI를 자동으로 업데이트한다. 리액트와 같은 도구를 사용하지 않으면 브라우저의 돔을 직접 업데이트해야한다. 돔을 직접 업데이트하는 코드는 잘 관리하지 않으면 프로그램이 커질수록 복잡도가 기하급수적으로 증가한다. 리액트의 장점은 가상 돔(virtual DOM)을 통해서 UI를 빠르게 업데이트한다는 점이다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 가상 돔 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.
리액트는 함수형 프로그래밍을 적극적으로 활용한다는 특징이 있다. 리액트에서 코드를 작성할 때는 다음 조건을 지키는 게 좋은데, 순수 함수와 불변 변수는 함수형 프로그래밍에서 자주 언급되는 개념이다.
- render 함수는 순수함수로 작성한다.
- state는 불변 변수로 관리한다.
render 함수는 순수함수여야 하므로 인수 state가 변하지 않으면 항상 같은 값을 반환해야 한다. 그리고 컴포넌트의 상태값을 수정할 때는 기존 값을 변경하는게 아니라 새로운 객체를 생성해야 한다. 코드에서 순수 함수와 불변 변수를 적극적으로 사용하면 복잡도가 낮아지고, 찾기 힘든 버그가 발생할 확률이 줄어든다. 더 중요한 것은 리액트에서 이 두 조건을 따르면 렌더링 성능을 크게 향상시킬 수 있다는 점이다.
렌더러에 구애받지 않는 것은 리액트의 중요한 디자인 제약 조건중 하나이다.