1. 리액트란?

1. 리액트란?

• 리액트는 페이스북에서 개발하고 관리하는 UI 라이브러리입니다.
• Angular 가 웹 애플리케이션 개발에 필요한 다수의 기능을 제공하는 것과는 대조적으로, 리액트는 UI 기능만 제공합니다.
  => 전역 상태 관리, 라우팅, 빌드 시스템 등을 각 개발자가 직접 구축해야합니다.
• 전반적인 시스템을 직접 구축할 수 있으니 각자의 환경에 맞게 최적화할 수 있지만, 반대로 신경 쓸 것이 많기 때문에 초심자에게는 높은 진입 장벽이 되기도 합니다.
  => 리액트 팀에서는 리액트의 진입 장벽을 낮추기 위해 create-react-app을 만들었습니다. create-react-app을 이용하면 리액트를 처음 사용하는 사람도 하나의 명령어로 리액트 개발 환경을 구축할 수 있습니다.
• 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 이유
  • 가장 큰 이유 중의 하나는 UI를 자동으로 업데이트해 준다는 점입니다.
  • 대개 프로그램의 상태가 변하면 UI도 변경되는데, 이는 다음과 같이 함축적으로 표현할 수 있습니다.
    => UI = render(state)
  •  API 통신이나 사용자 이벤트를 통해서 프로그램의 상태값을 변경하고 리액트가 변경된 상탯값을 기반으로 UI를 자동으로 업데이트 합니다.
  • 리액트와 같은 도구를 사용하지 않으면 브라우저의 돔을 직접 업데이트해야 합니다. 돔을 직접 업데이트하는 코드는 잘 관리하지 않으면 프로그램이 커질수록 복잡도가 기하급수적으로 증가하기 때문에 UI 업데이트를 순수 자바스크립트로 처리하려면 리액트에 상용하는 자체 라이브러리를 만들어서 관리하는 게 좋습니다.
• 리액트의 장점
  • 가상 돔(virtual dom)을 통해서 UI를 빠르게 업데이트한다는 점입니다. 가상 돔 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아집니다.
  • 리액트는 함수형 프로그래밍을 적즉적으로 활용한다는 특징이 있습니다. 코드를 작성할 때는 조건을 지키는 것이 좋은데, 순수 함수와 불변 변수는 함수형 프로그래밍에서 자주 언급되는 개념입니다.
    • render 함수는 순수 함수로 작성합니다.
    • state은 불변 변수로 관리합니다.
      
      • render 함수는 순수 함수여야 하므로 인수 state가 변하지 않으면 항상 같은 값을 반환해야 합니다. 또, 컴포넌트의 상탯값을 수정할 때는 기존 값을 변경하는 게 아니라 새로운 객체를 생성해야 합니다.
      • 코드에서 순수 함수와 불변 변수를 적즉적으로 사용하면 복잡도가 낮아지고, 찾기 힘든 버그가 발생할 확률이 줄어듭니다.
      • 가장 중요한 것은 리액트에서 이 두 조건을 따르면 렌더링 성능을 크게 향상 시킬 수 있다는 점입니다.
• 리액트 개발 환경 구축
  • 리액트는 UI 라이브러리이기 때문에 UI를 제외한 나머지 요소들은 개발자가 관래해야합니다.
  • 하나의 웹 애플리케이션을 만들기 위해서 테스트 시스템, 빌드 시스템, 라우팅 시스템 등 UI 외에도 신경 써야 할 부분이 많습니다.
  • 리액트 개발 환경을 직접 구축하기보다는 create-react-app과 같은 도구를 사용하는 것을 추천하지만 바벨과 웹팩의 필요성을 이해하기 위해서 리애긑 개봘 환경을 한 번쯤 구축해보는것이 좋습니다.