React.js 개요 및 개발 환경 구축
React
- 페이스북이 만든 UI/UX 구현을 위한 자바스크립트 라이브러리
- 사용자의 View에 초점
- Routing 같은 기술이 react 자체에 들어가 있지는 않음
- 개발자들이 여러가지 리액트에 필요한 것들을 만들어뒀기 때문에 사실상 프레임워크라 볼 수 있음 (프론트엔드 프레임워크)
- React UI 컴포넌트는 자바스크립트를 이용하여 구현됨
- React는 UI를 interactive하게 만들어 줌
- 웹 사이트에 interactivity(상호작용)을 만들어 줌
특징
#1 JSX 문법
- 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법
- Javascript + XML
XML
(Extensible Markup Language)
특징- 데이터를 정의하는 규칙을 제공하는 마크업 언어
- 이 단어는 머리글이다!!처럼 마크업 언어가 (대신) 알리고 있기 때문에 문서의 실질적인 내용에 영향을 주지 않아 문서의 유용성을 높임
#2 컴포넌트
- 리액트는 컴포넌트 기반 라이브러리
- 기존의 웹 페이지를 작성할 때처럼 하나의 코드를 집어넣은 한 페이지를 컴포넌트로 사용
- 컴포넌트 하나의 페이지를 여러 부분으로 분할할 수 있는 것!
※ 코드의 재사용성과 유지보수성을 증가시킴
#3 가상 virtual DOM
- DOM (Document Object Model)
- 문서 객체 모델
- HTML 단위 하나하나를 객체로 생각한 모델
- 문제점: 요소 추가 or 함수 수정 시 ⇒ 트리 재생성, 렌더링 재가동이 됨 ⇒ 복잡도 증가
- 해결책으로써 가상 DOM 사용하는 것 ⇒ 실제 DOM을 직접 변경할 수는 있어도 그 작업이 굉장히 값비싼 작업이기 때문에 가상 DOM에서 미리 최적화 한 번 해 주는 걸 의미
#4 return() 내의 특징
#1번에서 작성했듯이 return 내의 문법은 JSX의 문법으로 이루어짐
- 카멜 표기법으로 작성해야 함
className = "App" - 하나의 tag로 전체를 감싸 줘야 함 (의미 있는 태그는 물론 의미 없는 빈 태그도 가능)
return(
<></>
)#5 import & export
- Component를 export 해 줘야 타 file에서 import 할 수 있음 (새로운 컴포넌트 파일을 만들었을 때 export default NewComponentName;를 맨 아래 작성하는 걸 습관화 하면 좋음)
개발환경 구축
#1. Node 설치 (선택)
- nodejs.org 접속
- LTS(Long Term Statibility: 오랫동안 안정 버전 유지) 설치
- 원하는 위치지만 React를 다룰 폴더에 설치
Why Node Is Required for React
- React App은 웹 브라우저에서 실행되는 코드여서 Node.js와 직접적으로 연관은 없지만, Project를 개발하면서 필요한 주요 도구들이 Node.js를 사용해 만들어짐
Node is...
- 자바스크립트를 이용해 웹 서버를 만들 수 있는 개발 도구
- 자바스크립트는 interpreter 방식으로 코드가 실행됨 → 실행 속도가 느리다는 단점 有
→ 노드에 관련해서는 따로 공부 중 (포스트 업데이트)
#2. React 개발 환경 구축
- React folder 생성 (원하는 위치O, 원하는 이름O)
- cmd (명령 프롬프트) open
- cd 리액트\생성\경로
→ 1번의 folder 위치 복사 후 붙여넣기 후 enter (cmd가 진행할 내용들이 이 folder 위치에서 진행되도록 이동시켜 준 것) - create-react-app filename
→ (filename 원하는 이름O) - 설치가 완료되면 npm start 작성 후 enter
- 생성이 됐다면 VSC와 같은 개발 환경에서 폴더 오픈
- 구성 파일 중 불필요 한 파일, 필요한 파일 제거 및 내용 삭제
→ 프로젝트가 어떠냐에 따라 다름!
위 화면이 뜨면 성공인데, 파일을 보면 기본 세팅 파일이 생성 됐을 것!
그 중에서도 workspace 폴더에서 주요 파일들을 살펴 보자
#4 React 기본 세팅 구성 파일
이해해야 하는 이유: 필요 없는 파일은 지우고, 필요한 파일만 남기는 습관은 프로젝트를 앞으로 만들어 갈 때 중요하게 작용함
이해해두면 좋은 파일 리스트
- package.json
- .gitignore
- node_modules
- package-lock.json
- README.md
- src
→ index.js
→ App.js (==>> 실질적인 내용물 Oo) - public
→ index.html
index.js
- 최초로 npm start 후 실행되는 파일은 public/index.html
- < div id="root" > 부분이 body 부분이라 할 수 있음
- ReactDOM.render()를 이용해 <App />을 document.getElementById()로 root(index.html)에 렌더링(출력)하고 있음 ==> 결국 이런 과정들로 App.js의 내용이 출력된다는 이야기
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);코드 분석
- render(사전적 의미) : (어떤 상태가 되게) 만들다
- document : 브라우저 화면 자체를 가리킨다 생각하면 됨
- 'root' : index.html의 id가 root인 element를 불러온 것
- root에 App.js 컴포넌트를 보내주고 있는 셈
Tip. 여기서 <App />형태를 Component라고 볼 수 있음
App.js
- 출력되는 부분의 내용이 실제로 존재하고 있는 파일 → 실제 코드 작성은 이 파일에서 진행되어야 한다는 걸 알 수 있음! (다른 컴포넌트를 추가적으로 만들어 불러오는 것도 가능)
- 즉, 컴포넌트 단위로 (<App />) App.js를 index.js에서 보여주고 있는 것 (보여지고 있는 내용 =>> App.js)
index.css
- index.js를 위한 스타일 설정
App.css
- App.js를 위한 스타일 설정
(App.js를 App.css가 꾸며주고 있을 수 있는 이유? → return 시키고 있는 부분이 xml 문법인 걸 알 수 있음 : html을 꾸미고 있는 느낌)
이상 기본적인 React 개요 끝
React 1주차 과제 문제
문제
1. 리액트 프로젝트 설치 명령어는?
2. vscode 실행 명령어는?
3. 서버를 실행시키는 명령어는?
4. 서버 실행을 정지시키는 명령어는?
나의 정답
1. npx reacr-create-app myFileName
2. (cmd에서) code 입력 후 enter 버튼
3. npm start
4. (cmd에사) ctrl+c 버튼
참고 사이트
- https://itgo.kr/index.asp React part.1
건강합시다