SPA(싱글 페이지 어플리케이션) vs MPA(멀티 페이지 어플리케이션)
SPA = CSR(클라이언트 사이드 렌더링)
- 페이지(html)이 물리적으로 하나만 존재
- 페이지 넘어가는 동작을 하나의 이벤트로 인식해서 url이 변경(html가 이동하는 것처럼)
- 페이지 이동이 일어나면 어떤 함수를 실행해라라는 의미
문제점
- SPA = CSR(클라이언트 사이드 렌더링)
- Create-react-app 으로 만든 프로젝트
- html 가져온 뒤 css,js를 가져오는데 js안에서 백엔드 api호출이 하고 프론트에서 렌더링
- HTML이 하나이기 때문에 검색엔진에서 크롤링 불가(html 안에 메타 데이터가 한정됨)
- 광고 비용 추가 발생
문제점 해결
- NEXT.js : CSR의 단점을 보완하고 사용하는 프레임워크
- hydration : 서버에서 전송한 정적 문서를(html) 데이터 변경에 반응할 수 있는 동적 형태로(dom수정한다는 말)로 변환하는 client 측 process
- somorphic javascript : ssr 과정 중 한 js 코드가 프론트,백에서 둘다 돌아감
MPA = SSR(서버 사이드 렌더링)
- 한 페이지마다 html 파일이 따로 있음(각각의 html 파일이 존재)
- 구조 : 유저 => 브라우저 => 서버 <=> 진짜백서버
- 응답이 JSON으로 왔다갔다 하는게 아니라 HTML 파일 자체가 왔다갔다 함
- html 파일 안에 값을 다 넣어 둠
부모 자식 관계 라이프사이클
라이프 사이클 기본 순서!
순서를 꼭 인지 하자!!
1. constructor
2. render
3. componentDidMount
4. (fetch 완료)
5. render
6. (setState)
7. componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생)
가지고 오려는 데이터 객체
{
"data": [{ "index": 1, "name": "joon" }]
}객체 접근 시 자주 발생하는 문제!
- constructor
- render
- console.log("render") >>> 문제 없음
- console.log(this.state.data[0].name) >>> 💥에러 발생
- 빈 배열인 name이라는 키 값을 가질 수 없음 => Error 발생!
- 빈 배열의 0번째 index, 즉 this.state.data[0] 은 undefined이기 때문에 위와 같은 에러가 발생
해결방법
- 위의 처럼 조건부 연산자 아니면 삼항 연산자를 이용해서 있을 경우를 체크해서 렌더링
- 빨간색 표시된 부분을 해석해보면 "this.state.data[0] 이 true 인 경우에만this.state.data[0].name을 렌더하겠다" 라는 뜻
부모 자식 라이프 사이클 순서
- 부모 constructor
- 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
- 자식 constructor
- 자식 render
- 자식 componentDidMount (여기까지 하고 부모 컴포넌트로 다시 넘어감)
- 부모 componentDidMount
- 부모 fetch 완료 (setState 발생 > 업데이트 발생 > 다시 render)
- 부모 render (부모 render 안에 있는 자식 컴포넌트로 넘어감)
- 자식 render
- 자식 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생. 여기까지 하고 다시 부모로 넘어감)- 부모 componentDidUpdate
(componentDidMount는 최초 렌더 시 한 번만 실행되기 때문에 componentDidUpdate 발생)
Query, URL parameters
- 상세 페이지로 이동하는 경우 어떤 상품을 선택했는지 알 수 있는 방법 2가지!
동적라우팅
- 동적라우팅이란? 위에서 살펴본 경우과 같이 라우트의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것 (Dynamic Routing)
라우트로 설정한 컴포넌트는 3가지 props 사용 가능
- history
- 이 객체를 통해 push, replace 를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있습니다.
- 여러분들이 컴포넌트 이동(페이지 전환) 시에 this.props.history.push('/page') 를 통해 이동할 수 있었던 이유가 여기 있습니다.
- location
- 이 객체는 현재 경로에 대한 정보를 지니고 있고, URL 쿼리 (/company_list?category=3)에 대한 정보도 가짐
- match
- 이 객체에는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params (/company_detail/:id) 정보를 가짐
Front End. Dev