리액트란 무엇인가?

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

앵귤러가 웹 애플리케이션에 필요한 다수의 기능을 제공하는 것과는 달리, 리엑트는 UI 기능만 제공함. 따라서 전역상태관리나 라우팅, 빌드 시스템 등을 각 개발자가 직접 구축을 해야한다.

전반적인 시스템을 직접 구축할 수 있어서 자유도가 높지만, 개발환경을 직접 구축해야해서 다소 번거로움.

=> 이 단점을 보완하기 위해 리엑트 팀이 제공하는 것이 create-react-app!

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

라이브러리, 프레임워크를 사용하는 이유

자동으로 업데이트 되는 UI
- UI = render(state)
- 프로그램의 상태가 변하면 UI도 변경되어야 한다.
- 리엑트와 같은 도구를 사용하지 않으면 브라우저의 돔을 직접 수정해야해서 매우 복잡함.
- 우리는 API 통신이나 사용자 이벤트를 통해서 프로그램의 상태값을 변경한다. 그럼 리엑트가 변경된 상태값을 기반으로 UI를 자동 업데이트 해준다.
render함수는 순수함수로 작성
- 순수함수는 입력값이 같으면 출력값이 같아야한다.
  - 그래서 랜덤함수 x 날짜함수 x
- 순수함수는 외부상태를 변경하지 않아야한다.
  - 그래서 외부상태변경 x
  - 왜? render함수 내부에서 외부상태를 변경해버리면 다른 render함수의 출력값에 영향을 주기 때문.
state는 불변변수로 관리
- 어떤 객체의 속성을 변경한다고 할 때, 새로운 객체를 만들어서 값을 할당하는 것

React의 장점

가상돔을 이용해서 UI를 빠르게 업데이트 해준다.
- 가상돔(virtual DOM) : 이전 UI상태를 메모리에 유지해서 변경된 부분만 실제 돔에 반영해주는 기술
- 불필요한 UI 업데이트가 줄어들어 성능이 좋아짐.
가상돔 덕분에 다른 프레임워크, 순수 자바스크립트보다 빠르다고 이해하면 안됨!
- 프로젝트의 성격에 따라 성능 최적화 방법은 다를 수 있다.
- 순수 자바스크립트로 특정 프로젝트에 맞게 최적화를 하면 리액트나 앵귤러로 작성한 코드보다 더 빠르게 동작할 수 있다.

=> 이렇게 순수함수와 불변변수를 적극 사용하면 버그 발생 낮아지고, 복잡도가 낮아짐.

리엑트에서 이 두 조건을 따르면 랜더링 속도도 빨라짐!

부수효과란? 외부의 상태를 변경하는 것. 또는 함수로 들어온 인자의 상태를 직접 변경하는 것 순수함수란? 부수효과가 없는 함수. 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수 및 외부 상태를 변경하지 않는 함수 함수형 프로그래밍이란? 객체지향 프로그래밍과 반대되는 개념. 부수효과를 없애고, 순수함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임. https://jeong-pro.tistory.com/23 참고