[강의/실전 리액트 프로그래밍] 1. 리액트란 무엇인가?

리액트란?

리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리입니다.

앵귤러가 웹 애플리케이션 개발에 필요한 다수의 기능을 제공하는 것과는 달리 리액트는 UI 기능만 제공합니다.

따라서 전역 상태 관리나 라우팅 또는 빌드 시스템 등을 각 개발자가 직접 구축해야 한다는 것입니다.

전반적인 시스템을 직접 구축할 수 있어서 자유도가 높다는 장점이 있지만 개발환경을 직접 구축해야 하는 다소 번거로운 점이 있습니다.

 

---

리액트와 같은 프론트엔드 라이브러리나,  프레임워크를 사용하는 이유는?

가장 큰 이유중 하나는 UI를 자동으로 업데이트 해준다는 점입니다.

대게 프로그램의 상태가 변하면 UI도 변경이 됩니다. 이는 다음과 같이 함축적으로 표현을 할 수가 있습니다. UI = render(state)

 

우리는 API 통신이나 사용자 이벤트를 통해서 프로그램의 상태값을 변경합니다. 그리고 리액트가 변경된 상태값을 기반으로 UI를 자동으로 업데이트 해줍니다. 리액트와 같은 도구를 사용하지 않으면 브라우저의 돔을 직접 수정해 주어야 하는데 그게 간단하지는 않습니다.

 

render 함수는 순수함수로 작성하는게 좋습니다. 순수함수란 입력값이 같으면 출력값이 같은 함수를 말합니다.

state는 불변변수로 관리하는 것이 좋습니다. 불변 변수로 관리한다는 것은 새롭게 상태를 갱신하는 경우에 기존 객체를 변경하는것이 아니라 새로운 객체를 만들어서 값을 할당하는 것을 말합니다.

 

이렇게 코드에서 순수함수와 불변변수를 사용하면, 복잡도가 낮아지고 버그가 발생할 확률도 줄어듭니다. 더 중요한 것은 리액트에서 이 두 조건을 따르면 렌더링 성능을 크게 향상시킬 수 있다는 점입니다.

 

리액트의 장점은 가상돔을 통해서 UI를 빠르게 업데이트 한다는 점입니다. 가상돔은 이전 UI 상태를 메모리에 유지해서 변경된 부분만 실제 돔에 반영해주는 기술입니다. 가상돔 덕분에 불필요한 UI 업데이트가 줄어서 성능은 좋아지는 것입니다.

하지만 주의해야할 부분이 있습니다! 가상돔 덕분에 리액트가 다른 프레임워크나 순수 자바스크립트보다 빠른건 아닙니다. 순수 자바스크립트로 특정 프로젝트에 맞게 최적화를 하면 리액트나 앵귤러로 작성한 코드보다 더 빠르게 동작할 수 있습니다.

즉, 프로젝트에 성격에 따라 성능 최적화 방법은 다를 수 있다는 것입니다.

 

 

 

 

---

출처 : 실전 리액트 프로그리맹 - 인프런 (추천합니다 !!)

실전 리액트 프로그래밍 - 인프런