리액트
리액트 : 프로트엔트 개발을 위한 자바스크립트 오픈 소스 라이브러리
JSX는 JavaScript 확장 문법으로 마크업 형태의 코드를 작성하여 DOM에 배치할 수 있게 됨
컴포넌트 : 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋
렌더링 : 렌더링은 HTML, CSS, JS로 작성된 문서를 파싱(해석)하여 브라우저에 시각적으로 출력하는 것
SPA
SPA등장배경 (결론 : 쓰는데 불편하니까 쓰기 편하게 바꾸자!)
전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면 브라우저가 페이지를 보여주기 위해 매번 HTML파일로 된 "페이지 전체"를 불러와야만 했음
웹사이트가 보다 복잡해지고 어플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되면서 때마다 Header나 Navigation Bar등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트랙을 발생시켜 더 느린 반응성을 갖게 되었고 이는 어플리케이션과 같은 사용자 경험을 제공하기 어렵게 만듬
(사용자 경험 : 사용자가 어떤 시스템, 제품, 서비스를 직, 간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험)
SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아닌 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹사이트나 웹어플리케이션을 말함
SPA장점
1. 사용자와의 상호작용에 빠르게 반응
2. 서버 과부하 문제가 현저하게 줄어듬
3. 전체페이지 렌더링을 할 필요가 없기 때문에 더 나은 사용자 경험을 제공
SPA단점
1. JAvaScript의 파일의 크기가 커서 JavaScript파일을 기다리는 시간으로 인해 첫화면 로딩시간이 길어짐
2. 검색엔진 최적화가 좋지 못함
와이어프레임 : 디자인에 들어가기 전 단계로 선을 이용해 윤곽선을 잡는 것을 말함
React Router
SPA는 하나의 페이지를 가지고 있지만 사실 한종류의 화면만 사용하는 것은 아님
각 화면은 다른주소를 갖게 되고 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경"의 의미로 라우팅(Routing)이라고 함
React Router 주요 컴포넌트
<BrowserRouter> => 라우터 역할
<Switch> => 경로매칭
<Route> => 경로매칭
<Link> => 경로변경
import => 필요한 모듈을 불러오는 역할, 비구조화 할당과 비슷하게 이용 가능!
Props & State
props
1. 컴포넌트의 속성을 의미, 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값
2. 상위 컴포넌트로부터 전달받은 값
3. 어떤 타입의 값도 넣어 전달할 수 있도록 객체형태를 가짐
4. 함부로 변경될 수 없는 읽기전용 객체
state
1. 컴포넌트 내부에서 변할 수 있는 값
2. 애플리케이션의 상태를 말함
여담 : react 너무 너무 어려워어ㅓㅓㅓ...
.jpeg)