React
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
SPA
Single-page application
https://ko.reactjs.org/docs/glossary.html
VDOM
Virtual DOM, React.js 동작 원리
UI의 이상적인 또는 ⭐가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 ⭐실제 DOM과 동기화하는 프로그래밍 개념 => 재조정
https://ko.reactjs.org/docs/faq-internals.html
리액트 특징
- VDOM(Virtural DOM)을 통한 효율성과 속도 개선
- 데이터의 흐름은 단방향(위 -> 아래)
- 기능별로 구분된 최소한의 단위 구조 : 컴포넌트(Component)
환경구축
- Node.js 설치 : https://nodejs.org/ko/
자바스크립트로 되어있는 어플리케이션을 구동할 수 있도록 환경을 제공하는 플랫폼
1-1. 16.X LTS 다운로드 및 설치
1-2 확인 : cmd? node --version(축약형 :-v), *npm -v - VSCode
2-1. 관리자모드로 실행
2-2. CMD 설정> 기본설정(Ctrl + ,) > Terminal > Default Profile : CMD로 설정
*npm
Node Package Manager
개발에 필요한 도구를 관리하는 매니저
실습환경
CRA
Create React App
https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app
npx create-react-app [프로젝트명]
cd [프로젝트명]
npm start참고 : Boilerplate프로젝트 구조
모듈 (module) : 어플리케이션에서 기능별로 구별되어 있는 코드 조각
1. node_modules : 패키지 관리 도구로 설치한 패키지 꾸러미
2. public : 작업한 대부분 파일의 위치
- index.html : 리액트 프로젝트를 실행하는 파일
- manifest.json : 사이트의 정보 파일(favicon, ...)
- robots.txt : 검색 엔진이 사이트를 수집하는 범위 등을 설정
- src : 작업하는 공간
- package.json : npm이 관리하는 패키지 정보에 대한 기록
JSX
JavaScriptXML
https://ko.reactjs.org/docs/introducing-jsx.html
XML
다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어
사용자 정의 태그 생성 가능 -> 이러한 기능을 JS를 통해 확장시킨 것 -> JSX
엘리먼트 (Element)
React 애플리캐이션을 구성하는 블록
엘리먼트는 화면에 보이는 것들을 기술하며, React 엘리먼트는 변경되지 않는다.
컴포넌트 (Component)
페이지에 렌더링할 React 엘리먼트를 반환하는 작고 재사용 가능한 코드 조각
JSX 문법 정리
- JSX는 반드시 여닫는 형태가 되어야한다
- ex)
<> </>
- 2개 이상의 컴포넌트가 나열될 때에는 외부에 감싸는 JSX가 반드시 하나 이상 있어야한다.
- ex)
<>
<Component />
<Component />
</>
- JSX에서 class는 className이라는 property 명으로 사용
- style은 객체(CSS를 적용하느 문법을 가진)를 이용
- JSX에서 변수를 활용할때는 {}문법을 이용한다
- 컴포넌트 사이에는 컨텐츠를 허용하지 않는다
(Empty) Fragment 문법
https://ko.reactjs.org/docs/fragments.html
React Fragment
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>단축문법 Empty Fragment
<>
<td>Hello</td>
<td>World</td>
</>Fragments를 선언하는 더 짧고 새로운 문법, 빈 태그와 유사
API Test Tool
* Postman
https://www.postman.com/
https://dog.ceo/api/breeds/image/random
https://jsonplaceholder.typicode.com/posts
* News API
https://newsapi.org/
https://newsapi.org/s/south-korea-news-api
실습
컴포넌트(Hello.js) 만들기
-
Hello.js 컴포넌트 파일 생성
-
Hello.js 컴포넌트 모듈화 export default Hello;
-
모듈화된 Hello.js파일 App.js에서 import
-
import Hello from './Hello';
-> 여기서 사용된 별칭(Hello)을 JSX에서 태그형식으로 사용 -
JSX작성 <Hello />
