2021.01.23 React 설치 및 시작 흐름

2021.01.23_React 설치 및 시작 흐름_정리노트

 

리액트 첫 포스팅.. 도저히 나는 가만히 강의만 듣고 따라해보고 그냥 노션에다가 메모하려니 의지 불충만이라서 오늘도 포스팅의 힘을 빌려서 열심히 정리해봐야겠다. 

 

강의 참고는 생활 코딩 - 리액트 를 참고했다.. 생활 코딩 최고 ..

 

리액트 시작하기! 

 

출처 - 리액트 공식문서

 

 

출처 - 리액트 공식 문서

 

 

공식문서에 보면, 리액트를 시작하는 여러가지 옵션이 있는데, 나는 3번째 새 react 앱 만들기를 선택해서,

리액트를 시작할 수 있는 여러 툴체인을 활용할 것이다. 

그 중에 Create React App 으로 들어가면, 

 

출처 - facebook/ create-react-app 깃허브

 

이렇게 터미널창에 치라고 나온다.

여기서 npx 는 npm의 5.2+ 버전의 패키지 실행 도구다.

 

npm 이란?

node.js 에서 만들어진 여러 앱, 프로그램들을 명령어를 통해 손쉽게 설치할 수 있게 하는 프로그램이다.

npm 을 설치하기 위해서는 먼저 node.js 를 설치해준다. 나는 최신 버전을 다운받았다.

 

그리고 터미널 창에서 npm-v 를 입력하고, 버전 숫자 정보가 뜬다면 설치 성공!

 

또 여기서 권장하는 방법은 npm -g 옵션을 통해 설치를 한 상태라면, npm uninstall -g create-react-app 을 통해 지우고 npx를 통해 설치를 하라라고 권장하고 있다. 

왜 그런가하면은, npm -g install을 하게 되면, create-react-app 이라는 프로그램을 글로벌하게 설치를 하게 되는데, 이렇게 되면 한번만 설치를 해도 된다는 장점이 있지만, create-react-app을 npx로 설치하게 되면, 해당 앱 내에서만 실행하고, 그 이후에는 create-react-app이라는 프로그램을 지우게 된다. 그렇게 하면, 메모리도 아낄 수 있고, create-react-app 을 항상 최신 버전으로 사용할 수 있다.

 

이제 설치 ㄱㄱ

 

폴더를 하나 만들어주고,

 

npx create-react-app 내가 만든 앱이름

 

을 하게 되면, 터미널창에서 막 로딩겁나 되면서 많은 것들이 설치가 된다. 기다려주고, 설치가 완료되면

 

npm start

 

react 시작!

 

 

 

 

그러면 알아서 브라우저를 열면서, 이렇게 띄워준다.

 

이제 리액트를 쓸 수 있게 되었음!!

 

---

 

이제 리액트가 어떻게 돌아가는지 흐름 정리.

 

public 폴더 안 index.html

 

 

먼저 만들어져 있는 퍼블릭 폴더안에 보면, index.html 이라는 html 파일이 있는데, 여기서 보면 root 라는 id 가 있다. 

우리는 리액트에서 컴포넌트를 만들고 작업을 하는데, 리액트에서는 기본적인 경로가 root로 설정되어 있고, 이 경로 안에 우리가 만든 컴포넌트들이 담기게 된다. 

 

 

근데 div 태그인데 경로..? 이건 또 src 폴더 안에 있는 index.js 로 가봅씨다.

 

src/index.js

 

 

오 여기에 Js 로 root 를 받아왔네!!  그래서 여기서 다시 

 

 

App render 안에 적힌 것들은 우리가 만들 컴포넌트를 쓸 때의 방식인데, 쨋던 뭐를 불러왔는가를 보면은,

 

src / App.js 

 

여기다 여기!! 지금 내가 막 이것저것 강의 들으면서 같이 따라해본다고 이상한게 많은데, 쨋던 이렇게 해서 실질적으로 우리가 보는 화면을 띄우는 것은 여기 App.js 에서 하는 것이다. 여기에서 html 을 띄우고 이 화면 그대로 리액트 화면에 브라우저로 출력이 된다. 

 

 

 

마지막으로 css 는 보면,

 

 

index.js 에 임포트 되어 있는 index.css 와 

 

 

 

App.js 에 있는 App.css 에 보면 기본적으로 세팅되어 있을 것이다. 여기서 수정하면 된다!! 

 

 

 

---

 

 

오늘은 전체적으로 파일이 어떻게 돌아가는지 대충 혼자 강의들으면서 정리해봤는데, 아직 익숙치 않기도 해서 그런지 생각보다 많이 헷갈려서 포스팅으로 정리해봐쑴. 원래는 App.js 안에서 또 어떻게 돌아가는지도 적어볼라고 했는데 그 거는 또 오래 걸릴 것 같아서 다음 포스팅으로 분리해야겠다.

오늘 리액트 포스팅 끝끝!