[React] 리액트 시작하기

준비

---

먼저 컴퓨터에 Node.js를 설치해야 한다.

https://nodejs.org/ko/

Node.js

해당 페이지에서 다운로드를 받을 수 있다.

 

Node.js 설치 페이지

위 링크로 들어가면 위와 같은 화면이 나올텐데 이 글을 작성한 날짜 기준으로 안정적, 신뢰도 높은 버전이 18.12.1이므로 18.12.1을 설치하는 것을 권장한다. 

 

만약 프로젝트마다 여러 버전의 Node.js를 사용해야 한다면 NVM(Node Version Manager)를 설치하면 된다.

https://github.com/coreybutler/nvm-windows/releases 

Releases · coreybutler/nvm-windows

해당 사이트에서 다운로드 받을 수 있다.

---

설치 확인

---

Node.js를 설치하면 터미널이나 cmd에서 node.js가 잘 설치 되었는지 확인해야 한다.

Windows 기준으로 node -v  명령어를 치면 설치가 잘 되었을 경우에 버전이 나온다.

Node.js 버전 확인

필자의 경우 18.12.0이 설치되어 있는데 최신거는 귀찮아서 안깔았다.

저렇게 버전이 잘 나오면 설치가 잘 된 것이다.

 

리액트에서는 npm과 yarn이라는 패키지 매니저를 사용한다.

npm의 버전도 확인해 준다. 명령어는 npm -v 이다.

npm 버전 확인

위와 같이 명령어 실행시 버전이 잘 나오면 설치가 잘 된 것이다.

 

만약 패키지 매니저로 yarn을 사용하고 싶다면 npm install -g yarn 명령어를 사용하여 yarn을 설치하면 된다.

---

리액트 앱 생성

---

본 블로그에 게시할 내용들은 패키지 매니저로 yarn을 사용할 것이기 때문에 yarn으로 리액트 앱을 생성하겠다.

명령어는 yarn create react-app [앱 이름] 이다.

앱을 생성하고 싶은 위치에 먼저 이동한 다음 명령어를 실행해야 한다.

리액트 앱 생성

명령어를 실행하면 위와 같이 뭔가 많이 나오게 될 텐데 잘 되고 있는 것이니 걱정하지 않아도 된다.

위 사진같은 경우 앱 이름을 my-app으로 하였다.

설치는 시간이 약간 걸린다.

설치 완료

설치가 완료되면 해당 화면이 cmd에 출력된다.

이제 VS code에서 확인해보면 된다.

설치 확인

익스플로러에 보면 뭔가 참 많다.

node-modules 파일이 설치 되고 src 폴더에 해당 파일들이 설치가 되어 있고 코드가 잘 나온다면 잘 설치된 것이다.

---

Reactjs code snippets 플러그인 설치

---

html파일에서 ! + Enter를 실행하면 html5 기본 형식을 자동으로 만들어 주듯이 React도 자동으로 컴포넌트를 만들어 주는 플러그인으로 Reactjs code snippets가 있다.

Reactjs code snippets

해당 플러그인을 설치하면 된다.

 

명령어는 다음과 같다.

rcc	클래스형 컴포넌트 생성
rsc	화살표 함수형 컴포넌트 생성
rsf	함수형 컴포넌트 생성

새로운 컴포넌트를 만들어야 할 때 해당 명령어를 사용하면 자동으로 코드를 만들어 준다.

 

클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 앞으로 다룰 것이다.

---

Hello World 출력해보기

---

앱의 렌더링은 index.js에서 일어난다.

index.js

index.js에 들어가면 위와 같은 코드가 있을 텐데 10번째 줄에 집중하면 된다.

App를 렌더링하겠다고 선언되어 있는데 여기서 App는 같은 파일에 있는 App.js를 import한 것이다.

같은 파일명이고 확장자가 다른 경우에, 뒤에 파일 확장자를 안붙힐 경우 js파일이 jsx파일보다 우선순위를 갖는다.

 

App.js

App.js는 이렇게 화면이 나오게 될 텐데 해당 코드들은 다 지우고 h1 태그에 Hello World를 넣어서 실행해 보겠다.

대폭 수정

코드를 수정한 후 VS code의 터미널에 npm start 혹은 yarn start 명령어를 실행한다.

npm, yarn start

명령어를 실행하면 아래와 같은 결과가 나올 것이다.

결과

이렇게 리액트의 기본 설치와 Hello World까지 출력을 해 보았다.