[React/리액트] 리액트 기초 공부 #1 (feat.생활코딩)

곧 학원에서 리액트를 배우게 될 건데, 미리 예습하는 차원에서 생활코딩 유튜브 강의를 보며 기초 공부를 해놔야겠다.
10개 밖에 되지 않고 길이가 짧기 때문에 빨리 끝낼 수 있을 것 같다.
(생활코딩 React 2022년 개정판의 총 10개의 강의 중 1~3편을 보고 작성하였다.)
 

역할

리액트의 핵심적인 역할 : 사용자 정의 태그를 만드는 것.
이 태그는 부품으로 사용되며 남들에게 공유하거나 공유받을 수 있다.
 

만드는 방법

리액트를 만드는 방법은 class 문법을 사용하는 것과 function(함수)문법을 사용하는 것으로 나뉜다.
최근에는 함수 문법을 이용하는 경우가 많아졌다.
 
 

설치

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

리액트의 홈페이지이다.
 
설치 방법은 https://youtu.be/txX3bL22esU 참고
(node.js가 필요하다)
 
 

명령어

npm start
npm run build
npm test
npm run eject
 

 

수정

npm start 를 터미널에 입력하면 리액트 개발환경이 실행되면서 코딩을 할 수 있는 환경이 동작하기 시작
 

입력하고 기다리면

이렇게 생긴 브라우저 창이 생긴다.

그리고 폴더에 이런 파일들이 주르륵 생성되는데
index.js에 적혀있는 대로 동작하게 된다. (입구 파일)
 
 

생활코딩 유튜브 캡쳐화면

 

가운데의 <app />을 지우면 오른쪽의 화면이 사라지게 된다. app은 곧 오른쪽 화면의 ui를 나타낸다.
이 <app />은 위의 import App from './App'의 App에서 온 것이고, App은 './App'에서 온 것이다.  './App'은 뒤의 js 확장자명이 생략된 것이다. 그러니까 곧, 현재 폴더에 있는 App.js 파일인 것을 알 수 있다.

 

App.js의 파일을 열어보면

이와 같은 코드가 존재한다.

내용을 바꾸면

바꾼 내용이 그대로 출력된다.
 
 
근데 화면을 보면 css가 적용되어 있는 것을 볼 수 있다. 바로

 

여기에 또 './App.css' 파일이 연결되어 있다.
 
그리고 index.js에도 index.css가 연결되어 있는데,

안에 있는 내용은 초기화해서 사용하면 된다.

 
 

근데 개발자도구화면에서 보면 div에 root라는 id가 붙어 있다. index.js를 보면 root라는 아이디로 렌더링 되라고 하는 코드가 있다.
이건 public 폴더 안의 index.html을 보면 된다.

여기 있다.

 
 
여기까지 봤을 때 내가 이해한 정도는 일단
우리가 웹을 만들 때 메인페이지 말고도 서브페이지들을 여러 개 만들게 된다.
이때 헤더나 푸터같이 페이지에 중복되어 들어가는 반복되는 코드가 있는데,
이것을 똑같이 복사 붙여넣기를 하지 않고 리액트를 이용하면
html안의 코드도 깔끔해지고 만약 코드가 수정되었을 때 일일이 다시 하나씩 복사/붙여넣기를 하지 않아도 되는
편리한 작업을 해주는 것 같다
 
 
 

배포

방금까지 작업한 리액트 파일은 개발에 적절한 상태고 배포하기에는 무겁고 여러 가지 불필요한 메시지들도 있다. 그러면 어떻게 하면 서비스에 최적화된 효율적인 배포본을 만들 수 있을까?
터미널에 npm run build 을 입력한다 (이전에 작업했던 내용 끄려면 컨트롤+c)

빌드 폴더 생성

 

빌드 파일 안의 index.html을 보면 이렇게 하나도 정리가 되어 있지 않고 빽빽한 모습을 볼 수 있다.
이는 최대한으로 용량을 줄이기 위한 것. (배포할 때는 정렬이 필요 없으니)
 
이를 서비스할 때

serve라는 웹서버를 사용하는 것을 추천 (node를 이용해 만들어진 앱)
실행시키기 위해서는 터미널에 npx serve -s bulid 입력

 

서버가 만들어졌다!