리액트 설치 방법
Node.js 설치
리액트는 Node.js 환경에서 실행되므로, 리액트를 설치하기 전에 먼저 Node.js를 설치해야 합니다. Node.js는 자바스크립트 런타임 환경으로, 리액트 애플리케이션의 빌드와 실행에 필요합니다. 공식 웹사이트에서 최신 안정 버전을 다운로드하여 설치할 수 있습니다. Node.js를 설치하면 npm(Node Package Manager)도 함께 설치되어, 리액트와 관련된 패키지를 쉽게 관리할 수 있습니다. 설치 후, 명령어로 Node.js와 npm의 버전을 확인하여 제대로 설치되었는지 확인할 수 있습니다.
Create React App으로 프로젝트 생성
리액트를 설치하는 가장 쉬운 방법은 Create React App을 사용하는 것입니다. Create React App은 리액트 프로젝트의 초기 설정을 자동으로 해주는 도구입니다. 이 도구를 사용하면 복잡한 설정 없이 리액트 프로젝트를 빠르게 시작할 수 있습니다. 이 방법을 통해 리액트 애플리케이션의 기본 프로젝트 구조와 필요한 설정이 자동으로 만들어지므로, 개발자는 바로 애플리케이션 개발에 집중할 수 있습니다.
npm을 이용한 리액트 설치
Create React App을 사용하지 않고 직접 리액트를 설치할 수도 있습니다. 이 경우, 먼저 프로젝트 폴더를 생성하고, 리액트와 리액트 DOM을 설치해야 합니다. 이후, 프로젝트 내에서 리액트와 DOM을 연결하는 환경을 설정하고, 필요한 파일들을 만들어야 합니다. 이 방식은 수동으로 프로젝트 구조를 설정하고, 필요한 개발 도구들을 직접 설정하는 방식이므로 더 많은 설정이 필요하지만, 자신만의 맞춤형 환경을 구축할 수 있습니다.
개발 서버 실행하기
리액트 프로젝트를 설정한 후에는 개발 서버를 실행하여 애플리케이션을 로컬에서 확인할 수 있습니다. 기본적으로 개발 서버는 로컬에서 실행되며, 애플리케이션의 변경 사항을 자동으로 반영하여 빠르게 결과를 확인할 수 있습니다. Create React App을 사용하면, 자동으로 개발 서버가 설정되므로 별도로 서버를 설정할 필요 없이 바로 실행할 수 있습니다. 이는 개발을 더욱 빠르고 효율적으로 진행할 수 있게 해줍니다.
프로젝트 구조 이해하기
리액트 프로젝트를 생성한 후에는 기본적으로 몇 가지 주요 파일과 폴더가 생성됩니다. public/ 폴더에는 index.html 파일이 포함되며, src/ 폴더에는 애플리케이션의 핵심 코드 파일들이 위치합니다. App.js는 리액트 컴포넌트를 작성하는 주요 파일이며, index.js는 애플리케이션의 진입점 역할을 합니다. 프로젝트 구조를 이해하고, 필요에 맞게 파일을 추가하거나 수정하면서 애플리케이션을 확장할 수 있습니다.