[React] 리액트 App 설치하고 실행하기

기초부터 시작! 리액트 App 설치와 실행 과정 정리

• React로 만든 웹 서비스들은 보통 React App, React Application 이라고 한다. 단순한 웹페이지의 기능을 넘어서 브라우저 위에서 동작하는 애플리케이션 같다고 하여 그렇게 부른다.
• react 또한 npm에 등록된 자바스크립트의 라이브러리다.
• react의 기타 도구 설치 및 설정은 입문자가 하기에는 어려움이 있어, Vite라는 차세대 프론트엔드 개발 툴로 기본 설정이 적용된 React App을 생성하자.
• Vite 툴로 리액트 app 생성 방법
  1. 터미널에서 npm create vite@latest 입력하고 사용할 언어 등을 선택하여 프로젝트를 생성한다.
  2. 생성된 프로젝트 폴더를 열고, 터미널에서 npm i 를 입력하여 라이브러리를 설치한다.
• 생성된 폴더와 파일 살펴보기
  • public 폴더는 이미지나 폰트 파일을 추가할 수 있는 폴더이다.
  • src 폴더는 리액트나 자바스크립트 소스를 보관하는 폴더이다.
  • eslint.config.js 파일은 eslint 라는 도구의 설정파일이다. 개발자들 사이에 코드 스타일을 통일하는데 도움을 주는 도구이다.
  • gitignore 파일은 github에 소스코드를 올릴 때 제외할 폴더 등을 설정하는 파일이다.
  • index.html 파일은 리액트 앱의 기본 틀을 제공한다.
  • vite.config.js 파일은 vite라는 도구의 옵션을 설정하는 파일이다.
• npm run dev 를 입력하여 리액트 앱을 실행해보자
  • 단축키 리스트
  • press r + enter to restart the server (서버 다시시작)
  • press u + enter to show server url (url 보여주기)
  • press o + enter to open in browser (브라우저 열기)
  • press c + enter to clear console (콘솔창 지우기)
  • press q + enter to quit (서버 종료)
• 리액트 앱의 동작 방식
  • index.html 에서 script 태그로 main.jsx파일을 불러오고 main.jsx파일은 <App /> 컴포넌트를 가져와서 렌더링 한다. index.html → main.jsx → App.jsx
  • App.jsx 파일안에 function App() {} 함수가 있고, 이 함수 안에 화면에 그려질 html 태그가 있다.

 

출처 : 한입 크기로 잘라 먹는 리액트