💻 SPA(Single Page Apllication) 프론트엔드
📌 React : 프론트엔드 프레임워크
- 사용자 인터페이스(UI) 개발에 초점을 맞춘 프론트엔드 라이브러리
- 복잡하고 동적인 웹 페이지 개발 시 사용이 용이하여, 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 개발에 많이 사용되는 프론트엔드 개발도구
- Facebook(현재 Meta)에서 만든 Javascript 사용자인터페이스(UI) 라이브러리
- html+css+javascript
- 리액트와 같은 프론트엔드 라이브러리, 프레임 워크를 사용하는 가장 큰 이유 중 하나는, UI를 자동으로 업데이트해주기 때문에 UI를 빠르게 업데이트할 수 있다는 것. 리액트는 가상 돔(Virtual Dom)을 통해 재사용이 필요한 기능을 언제든지 필요한 곳에서 호출하여, 반복적인 코드 작성 없이 사용할 수 있도록 해준다.
ㅤ
💡 프론트엔드 개발 도구 중 리액트를 가장 많이 사용하는 이유
[출처: npmtrend - React와 Angular, Vue 다운로드 수치]
- 앵귤러와 뷰는 자신들만의 문법을 갖고 있지만, 리액트는 자바스크립트 기반의 문법을 사용하기 때문에 자바스크립트에 익숙하다면 보다 쉽게 사용이 가능하다.
- 리액트는 가볍고 유연한 라이브러리로, 필요한 부분에만 적용할 수 있다. 때문에 기존 프로젝트에 리액트를 통합하기 쉽게 만들어준다. 또한, 다른 프레임워크나 라이브러리와의 혼용도 가능하므로 기존 코드를 변경하지 않고도 리액트를 도입할 수 있다.
- 리액트는 페이스북에서 개발한 오픈 소스 프로젝트로, 활발하고 다양한 커뮤니티와 생태계를 가지고 있다. 이는 문제 해결을 위한 자료와 지원을 쉽게 얻을 수 있으며, 다양한 라이브러리와 도구를 활용하여 개발 생산성을 높일 수 있다.
ㅤ
💻 리액트 개발 세팅
- node.js(javascript 확정 버전)
- javascript는 웹페이지에서 사용할 수 있도록 만들어진 언어
- node.js를 설치하면 npm, npx라는 명령어를 사용할 수 있음
- 리액트 프로젝트를 생성할 폴더에서 터미널을 연 후 npm install -g create-react-app 실행
- 위 명령어는 create-react-app이라는 명령어를 pc에 설치!
- pc에 한 번에 실행
- 리액트 프로젝트 생성
- 터미널에 npx create-react-app 프로젝트명 명령어를 실행
- 생성한 프로젝트를 실행할 때는 터미널에 npm start 명령어를 실행
- 프로젝트 실행 종료를 위해서는 터미널에 Ctrl+c키를 입력한다.
⭐useState : 값이 변하면 화면에 바로 적용되어 나타남
ㅤ
🔍 참조
먹고 기도하고 코딩하라