[React] 간단하게 리액트 프로그램 만들기: create-react-app

 

[React] React.js란 무엇일까? 기초부터 간단정리

이전 포스팅에서 리액트에 대해 이해했다면 

바로 실전으로 들어가보자!

---

chap 1 : 새로운 폴더 만들기

vscode 사용

자기가 만들고 싶은 위치에 새로운 폴더를 만들어 준다

---

chap 2 : create-react-app

vscode 터미널을 이용해 만든 폴더로 이동해주고 npx create-react-app 폴더이름을 입력해 준다

여기서 npx는 설치하지 않은 패키지를 한 번만 쓰고 싶을 때 사용하는데 이를 쓰기 위해선 node와 npm 이 미리 install 되어있어야 한다

미리 install 해두자! create-react-app 한 후  5분 내외로 설치가 완료된다.

 

그렇다면 내가 만들어둔 React_review 파일 안에 create-react-app으로 만든 reactprac1 폴더가 생긴고 그 안에

세팅이 되어있을 것이다 하지만 이러면 보기가 싫으니 reactprac1 폴더 안에 있는 모든 것들을 복사한 후 reactprac1 폴더를 지운 후

본래 만들어둔 React_review폴더로 옮겨주어 루트폴더로 만들어준다

 

create-react-app?
-React 라이브러리만 꼴랑 받는다고 바로 리액트를 사용할 순 없다 추가적인 라이브러리들도 필요한데 ex) webpack, Babel...
하지만 이 모든 패키지들을 이해하고 설치하여 React를 시작하기엔 리액트는 시작도 안 했는데 힘도 들고 시간도 너무 든다
그래서 시작에 필요한 패키지들의 설정을 다 끝내두어 기초세팅 필요 없이 리액트를 할 수 있게 도와주는 것이 create-react-app 

완료된 모습

---

chap 3 : 실행시켜 보자!

(나는 시작전 필요없는 파일들을 미리 지워뒀다)

App.js 기존에 있던 코드를 다 날린 후 return문의 h2태그를 만들어 hi react! 를 입력해 보았다 (App.css안 코드도 모두 지워둠)

그 후 npm start 명령어를 입력해 실행해 보자

짠! 

---

chap 4 : 간단한 활용? (리액트 이렇게도 쓸 수 있다!)

리턴문 밖에 이름이 담긴 지역변수를 하나 만들어주고 h2태그 안에 중괄호를 통해 값을 넣어보자 어떻게 될까?

값이 찍혀 나오는 걸 볼 수 있다 이렇게 JS와 HTML문법을 합쳐서 사용할 수 있는 문법을 JSX라고 한다

이 JSX는 JS의 함수 변수등을 HTML에 쉽게 포함시켜 사용할 수 있어 편리함을 준다 리액트에서 많이 사용하니 익혀두기!

 

 

---

..💬

create-react-app을 통해 간단하게 프로젝트를 만들어 보았다 하지만 create-react-app 다양한 개발환경을 만족시키기 위해 포함되어있는 모듈들이 정말 많다 그래서 쉽게 개발을 도와주지만 그만큼 설정을 변경하기 힘들고 크기도 무겁다는 게 단점이 있다..

그리고 JSX는 귀여운 거 같다...