React란?

리액트란 무엇인가?

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

따라서 전역 상태 관리나 라우팅 또는 빌드 시스템 등을 각 개발자가 직접 구축해야합니다. 전반적인 시스템을 개발자가 구축할 수 있다는 점에서 자유도가 높다는 장점이 있지만, 개발 환경을 직접 구축해야한다는 번거롭다는 단점이 있습니다.

리액트 팀에서는 create-react-app (CRA)이라는 툴을 제공해서 이 단점을 어느정도는 보완합니다.

리액트의 특징

• UI를 자동으로 업데이트 해준다.
  -> 프로그램의 상태가 변하면 UI도 변경이 됩니다. 보통 API통신이나 사용자 이벤트를 통해서 프로그램의 상태값을 변경하는데, 이때 리액트가 변경된 상태값을 기반으로 UI를 자동으로 업데이트 해줍니다.

• 가상돔(virtual dom)을 통해 UI를 빠르게 업데이트 합니다.
  -> 리액트의 가장 큰 장점!
  -> 가상 돔은 이전 UI 상태를 메모리에 유지해서 변경된 부분만 실제 돔에 반영해주는 기술이다. 가상 돔 덕분에 불필요한 렌더링이 줄어들어 성능이 좋아짐!

📌 가상돔 덕분에 리액트가 다른 프레임워크 혹은 순수 자바스크립트보다 더 빠르다고 이해하면 x
순수 자바스크립트로 특정 프로젝트에 맞게 최적화를 하면 리액트나 앵귤러로 작업한 코드보다 더 빠르게 동작할 수 있음. 즉 프로젝트의 성격에 따라 성능 최적화 방법은 다르다!

• state는 불변 변수로 관리한다.
  -> 어떤 객체의 속성을 변경한다고 할 때, 새로운 객체를 만들어서 값을 할당하는 것.

• render 함수는 순수 함수로 작성한다.
  -> 순수 함수 : 입력값이 같으면 출력값이 같다.
  -> 랜덤 함수 사용 x : 렌더 함수 내에서 랜덤 함수나 날짜 함수 등을 사용하게 되면 입력 값이 같아도 출력값이 다를 수 있음.
  -> 외부상태 변경 x : 렌더 함수 내부에서 외부상태를 변경하게 되면 다른 렌더 함수의 출력값에 영향을 줄 수 있음.

😎 이렇게 코드에서 불변 변수와 순수 함수를 적극적으로 사용하면 복잡도가 낮아지고 버그가 나올 확률이 줄어든다. 더 중요한 것은, 렌더링 성능을 크게 향상시킬 수 있음.