230814 day88 개념 정리

리액트, 앵귤러, 뷰 

스프링부트

SPA(Single Page Application)
: 단일 페이지로 구성된 어플리케이션 

<a> href="sub.html"</a>


필요한 모든 정적 리소스를 처음에 한 번만 다운로드 

페이지 이동 시 갱신에 필요한 데이터만 
json으로 전달받아서 페이지를 갱신함 

전체 페이지가 랜더링 되는 것이 아니므로 
트래픽을 감소할 수 있고 
네이티브 앱과 유사한 사용자 경험을 제공할 수 있음

속도, 사용성, 반응성의 향상으로 더 나은 사용자 경험을 제공함 

리액트는 Virtual DOM 이라는 가상의 돔을 사용함 
이 돔은 메모리에 가상으로 존재하는 DOM으로 
자바스트립트 객체이기 때문에 작동 성능이 훨씬 빠름


nodejs 설치 검색 후 상단 홈페이지 클릭 
LTS - 윈도우 인스톨러 - 64-bit 클릭 
CMD창 들어가서 node -v 입력 후 버전 나오면 설치된 것임

10리액트 폴더 생성 후 그 폴더에 들어가서 경로창에 cmd 입력
npx create-react-app begin-react 명령어 입력 

('npx'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는
배치 파일이 아닙니다. -> 라는 에러 발생 시에는 아래 코드 cmd창에 입력)

npm uninstall -g create-react-app (리액트 앱 제거)
npm install -g create-react-app (리액트 앱 재설치)
npx create-react-app begin-react (리액트 앱 실행)


JSX : 리액트에서 사용하는 문법 
html과 비슷하게 생겼지만 javascript임 

리턴 바로 안의 태그는 1개만 사용 가능함
리턴 바로 안에서 여러개의 태그를 사용하고 싶으면 
겉에 <></> 빈 태그로 묶어줘야함 (fragment)

JSX 내부에 자바스크립트 변수를 보여줘야할 때는 {}으로 감싸서 보여줌


function App() {

} 

function : 컴포넌트 
(함수형 컴포넌트도 있음)


리액트 컴포넌트에서 동적인 값을 상태(state)라고 부름 
useState() 
: 컴포넌트 값이 동적으로 바뀔 때 상태를 관리해주는 함수, 배열을 리턴

state가 변경되면 자동으로 리랜더링되면서 화면이 다시 그려짐 
let 대신에 useState() 사용해서 숫자 바뀌는걸 화면에 적용해줌