React 01. 시작하기

React 시작하기

최근 React를 공부하기 시작했다.

블로그에는 내가 구글링, 유튜브를 통해서 배운 것들에 대해서 좀 정리 해보려고 한다.

혹시라도 나와 같이 React를 처음 시작하는 사람이 있다면 이 글이 조금이나마 도움이 될 수 있으면 좋겠다.

1. create-react-app

React 공식문서를 보면 몇가지 React app을 시작하는 방법이 있는데
나는 그 중에서 create-react-app이라는 toolchanin을 사용했다.

사용하기에 앞서 본인 개발 환경에 node를 설치해줘야한다.
(https://nodejs.org/ko/ 여기서 본인 컴퓨터에 맞게 설치)

이후 사용법은 간단하다.

npx create-react-app my-app
cd my-app
npm start

위 순서대로 터미널에 입력해주면 된다.
(완료되는데 시간이 조금 걸린다.)

npx create-react-app my-app

원래는 npx가 아닌 npm을 보통 입력해준다. npm이란 Node.js로 만들어진 다양한 모듈을 설치하기 위한 명령어이다. 한마디로 자바스크립트를 위한 패키지 관리자이다.
(다른 예시로 python에서는 pip install.... 을 사용한다.)

npx는 npm과 달리 설치하는 것이 아니라 해당 모듈에 한번 접근해서 실행하는 것이라 보면 편할 것 같다. (자세히는 나도 모른당...)
장점은 npm의 경우 설치한 뒤에 시간이 지나며 새로운 버전이 나오면서 버전에 차이가 생기는데 npx는 접근하여 최신 버전으로 한번 실행을 해준다는 것이다.
단점은 npm은 한번 설치해주면 끝인데 npx의 경우 시작할 때 마다 매번 해줘야 한다는 번거로움이 있다.

여튼, create-react-app은 그 뒤에 작성한 이름으로 앱을 만들어 준다.
여기에서는 'my-app'이라는 이름으로 리액트 앱을 만들어줘~ 라는 뜻이 된다.
app이 성공적으로 만들어졌다면 터미널에 Happy hacking!이라는 문구가 뜬다 ㅎㅎ

cd my-app, npm start

cd my-app은 my-app이라는 디렉토리로 이동하는 것이고,
해당 디렉토리 안에서 npm start로 리액트 앱의 서버를 작동시킨다.

이렇게 브라우저에 화면이 뜨면 성공적으로 리액트 앱이 완성 된 것이다.